Hi! I am designing a website and are using media queries. I started with the one for the phone first since I’ve heard thats best. But now I am going to design the part for the computer, and I dont really know how to start. In my design there is differences in the style between the phone view and the computer view, so I am thinking maybe I should have two different html documents if that is even possible?
Dont really know what to do, when having two different styles for the different views.
You can get away with having 2 different HTML documents, but then you’re going to need a script that checks if the viewport is small, then you have to redirect them to the page. What you can do is just use normal CSS, since the @media query will only effect if the device viewport is smaller than you declared. You can have them side by side, like the navbar, you can have a hamburger menu right beside the normal navbar, but it would only appear when the device is smaller. You can check this website I made, try to resize the browser size and see what happens. Then check out the code, but DON’T use it. You can reference it, but using my code will be against the Academic Honesty.
https://joshuapelealu.github.io/
Thank you! I think it would be better to only have one html document, but my menu is different from the views. This is my design for the menu, please look and if its not possible at all I will have to just change it. I already have the mobile menu finished, so its just the one for computer left:
This is for the computer:
As you see the menu for the phone is quite easy, but how can I change the logo image to come in the middle when using media query?
Can you link your project here, or maybe your code so I can help… But anyway, I would say that that is already a great design, but it’s your design, so I will try to help. I just need to see your code to see what you’re having problem with.
Thank you so much for helping me, here it is:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Lashesbyleila</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/zeyada:n4:default.js" type="text/javascript"></script>
</head>
<body>
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Top Navigation Menu -->
<div class="topnav">
<a href="homepage.html" class="active"><img src="../Logo/mobilelogo.png" width="100" height="55" alt="logo"></a>
<!-- Navigation links (hidden by default) -->
<div id="myLinks">
<a href="erfaringer.html">ERFARINGER</a>
<a href="prisliste.html">PRISLISTE</a>
<a href="bestilltime.html">BESTILL TIME</a>
<a href="kontakt.html">KONTAKT</a>
</div>
<!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
<h1 class="headerphoto">
<div class="container">
<img src="photos/c700x420.jpg" class="responsive" alt="photoheader">
<div class="text-block">
<p>Velkommen til Lashes by Leila</p>
<hr style="width:70%;text-align:center;">
<p>Bestill time her!</p>
</div>
</div>
</h1>
<div class="aboutleila">
<p>Om Leila Jaffri</p>
<img src="photos/Screenshot 2020-05-24 at 15.44.37.png" width="285,75" height="296,1" alt="Leila">
</div>
<div class="aboutleila2">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit </p>
</div>
<!--Social media icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="icons">
<a href="https://www.facebook.com/LashesByLeila" class="fa fa-facebook"></a>
<a href="https://www.instagram.com/lashesbyleilaa/" class="fa fa-instagram"></a>
</div>
<footer class="footer">
<p class="footertext">Adresse: <br>
Hans Nordahls gate 38<br>
0481 Oslo <br>
<br>
Tlf:<br>
12345678<br>
<br>
mail:<br>
Leila@lashesbyleila.com
</p>
</footer>
</body>
</html>
And css:
@charset "UTF-8";
.headerphoto {
background-attachment: fixed;
}
@media (max-width : 768px ){
.headerphoto {
background-attachment: fixed;
background-size: cover;
}
.responsive {
width: 100%;
max-width: 768px;
height: auto;
}
/* Container holding the image and the text */
.container {
position: relative;
}
/* Bottom right text */
.text-block {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
background: rgba(255, 255, 255, 0.7); /* Black background with 0.5 opacity */
color: black;
padding-left: 60px;
padding-right: 60px;
font-size: 15px;
text-align: center;
font-style: normal;
font-family: "All Round Gothic Book";
font-weight: 100;
border: 5px solid #FFFFFF;
padding: 20px;
}
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 0.5px;
}
/* Style the navigation menu */
.topnav {
overflow: hidden;
background-color: none;
position: relative;
}
/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
display: none;
}
/* Style navigation menu links */
.topnav a {
font-family: sukhumvit set;
font-style: normal;
color: black;
padding: 6px 8px;
text-decoration: none;
font-size: 30px;
display: block;
}
/* Style the hamburger menu */
.topnav a.icon {
display: block;
position: absolute;
right: 0;
top: 0;
}
/* Add a grey background color on mouse-over */
.topnav a:hover {
background-color: none;
color: #515050;
}
/* Style the active link (or home/logo) */
.active {
background-color: white;
color: black;
}
.aboutleila {
text-align: center;
font-family: "All Round Gothic Book";
font-weight: 100;
font-size: 25px;
}
.aboutleila2 {
text-align: center;
font-family: "All Round Gothic Book";
font-weight: 100;
font-size: 15px;
padding-left: 40px;
padding-right: 40px;
}
/* Style all font awesome icons */
.fa {
padding: 10px;
font-size: 50px;
width: 18px;
text-align: center;
text-decoration: none;
border-radius: 50%;
margin-left: 5px;
}
/* Add a hover effect if you want */
.fa:hover {
opacity: 0.7;
}
/* Set a specific color for each brand */
/* Facebook */
.fa-facebook {
background: #000000;
color: white;
}
/* Twitter */
.fa-instagram {
background: #000000;
color: white;
}
.icons {
text-align: center;
width: 100%;
}
.footer {
background-color: #F4EEE9;
width: 100%;
padding-top: 5px;
padding-bottom: 20px;
margin-top: 10px;
}
.footertext {
font-family: "Courier New";
margin-left: 20px;
text-align: center;
width: 100%;
}
}
What you can do is give the image a position: relative, then give it a left of 50%; then a margin left of the negative of the width:
image-id {
width: 25px;
position: relative;
margin-left: calc(width-of-image / -2);
left: 50%;
}
Do you mean the logo?
Thank you I will try it. But do you know how to remove the hamburger style when designing the media quire for computer? Because right now the javascript for that is in the html document, and I dont know how to remove it without ruin it for the mobile view.
Owh, if you want to remove the hamburger, just give it a display: none;, it will remove it completely from the display and not take space.
Thank you thank you! You are the best!! So helpful, really saved my day haha!