0

So I have been playing around to get a website to be both working for desktop and phone. However I am getting confused stuff working on.

Basically what I am trying to do is to make it look like this when in desktop:

Desktop

and when on phone

phone

However what is happening is that when i'm trying to solve this doing in Google Chrome - im getting this result:

Chrome resizing

and when doing in Firefox:

Firefox resizing

where we can see that it actually looks quite okey in Firefox but not quite...

However I have no idea whats the reason for it. What I did is that I use a HTML file and a CSS separated. I used the @media funcition:

@media only screen and (max-width: 824px) {
    .sidenav{
        width: 100%;
        height: auto;
        position: absolute;
    }
    .main{
        width: 100%;
        padding:0 0 0 0;
        margin-top: 50%;
    }
    div.gallery{
        float: none;
        display: inline;
        width: 100%;
    }

    #pic2 {
        padding:0px;
    }
    h2{
        padding: 10% 0 0 20px;
    }
}

and this is how I connect it to my HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">

</head>
<body>

<div class="sidenav">
  <img src="https://vectortoons.com/wp-content/uploads/2017/05/basketball-emoji-collection-1-002.jpg" alt="Fotot kunde inte hittas" style="width:100px;height:100px;">
  <h1>Meny</h1>
  <a href="#länk1">Länk 1</a>
  <a href="#länk2">Länk 2</a>
  <a href="#länk3">Länk 3</a>
  <a href="#länk4">Länk 4</a>
</div>

What am I doing wrong? Basically what I wish is to make it like the first two pictures where the desktop version looks like the first version and whenever I resize to mobile version it should be like picture number 2...

Also please! If there is too little code provided or something else missing, Feel free to comment. I will be fast to response!

Fiddle:

Fiddle

CDNthe2nd
  • 369
  • 1
  • 5
  • 19
  • 2
    Can you create codepen or fiddle? – Tan Duong May 04 '18 at 13:56
  • Yes of course, One moment – CDNthe2nd May 04 '18 at 13:58
  • I updated the post! – CDNthe2nd May 04 '18 at 14:00
  • why your breakpoint is 824px? – Joe RR May 04 '18 at 14:04
  • I took the width from Pixel 2 XL which I assumed is the max point of it is 824px. So its nothing special. I can change it to 400px and it wouldn't do any matter on Google chrome sizing with mobile. – CDNthe2nd May 04 '18 at 14:05
  • this is wrong in my opinion, make your layout fluid, then, make a breakpoint when something in your layout not fit on the screen or "break", to the menu you can make a breakpoint just to change to mobile. – Joe RR May 04 '18 at 14:08
  • What you want, basically, is to make your website responsive design in firefox the same of chrome, right? – Giacomo Penuti May 04 '18 at 14:08
  • @LeandroRR I dont quite understand what you mean, Make breakpoint how in that case? Could you please give me an example so I know what you mean? – CDNthe2nd May 04 '18 at 14:09
  • @GiacomoPenuti Well... Kinda - basically what I want is if you look at the picture one - Thats how I want it to be in desktop and whenever I use the website on phone or smaller device, it should be like the picture 2. – CDNthe2nd May 04 '18 at 14:10
  • @CDNthe2nd as i see in fiddle testing in chrome, it is the same as the picture, so is that what you want to achive? – Giacomo Penuti May 04 '18 at 14:13
  • Oh you are actually right.. Hmm that is really strange. Because if I'm trying to use Google chrome device in F12 settings - It doesn't do that... – CDNthe2nd May 04 '18 at 14:15
  • Okey well - Lets say that it is solve, What I can see is that the pictures and some text is hiding behind the Menu bar - What could be the issue for that? – CDNthe2nd May 04 '18 at 14:18
  • Edited my answer with more details :) – Giacomo Penuti May 04 '18 at 14:30

2 Answers2

1

Try adding this to your Head tag

<meta name="viewport" content="width=device-width, initial-scale=1">

To tell the browser to use the device width.

EDIT

Also try this Media query, to remove the absolute/fixed positioning, and also the margins.

body {
    font-family: "Lato", sans-serif;
}

h1 {
 color: white;
 text-align: center;
}

h2{
    color: black;
    font-size: 50px;
    text-align: left;
    padding-right: 20px;

}

.sidenav {
 text-align: center;
 height: 100%;
 width: 15%;
 /* position: fixed; */
 top: 0;
 left: 0;
 background-color: black;
 padding-top: 100px;
}

.sidenav a {
    text-decoration: none;
    font-size: 15px;
    text-align: center;
    color: #818181;
    display: block;
    border: 10px solid black;
    background-color: white;
    border-radius: 25px;
    padding: 12px;

}

.sidenav a:hover {
    color: #f1f1f1;
}

.main {
    padding-left: 15%;
}


div.gallery {
    margin: 5px;
    float: left;
    width: 28.3%;
    display: inline;
}


div.gallery img {
    width: 100%;
    height: auto;
    border-radius: 35px;
}

div.desc {
    font-size: 15px;
    font-family: "Times New Roman", Times, serif;
    padding: 15px;
    text-align: left;
}

#pic2{
    padding: 0px 70px 0 70px;
}
.text{
    float: left;
    font-size: 17px; 
    position: relative;
}

.clearfix {
    overflow: auto;
}

.img2 {
    float: right;
    width: 30%; 
    height: 30%;
    padding: 10px 20px 10px 20px;
    border-radius: 35px;
}

footer {
    text-align: center;
    font-style: italic;
    font-family: Impact, Charcoal, sans-serif;
}

@media only screen and (max-width: 824px) {
    .sidenav{
        width: 100%;
        height: auto;
        /* position: absolute; */
    }
    .main{
        width: 100%;
        padding:0 0 0 0;
        /*margin-top: 100%;*/
        /* margin-top: 528px; */
    }
    div.gallery{
        float: none;
        display: inline;
        width: 100%;
    }

    #pic2 {
        padding:0px;
    }
    h2{
        padding: 10% 0 0 20px;
    }
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>Inl. 6 - Barry</title><!-- Titel av HTML, Kan även synas på TAB i Google chrome etc.-->

</head>
<body>

<div class="sidenav">
  <img src="https://vectortoons.com/wp-content/uploads/2017/05/basketball-emoji-collection-1-002.jpg" alt="Fotot kunde inte hittas" style="width:100px;height:100px;">
  <h1>Meny</h1>
  <a href="#länk1">Länk 1</a>
  <a href="#länk2">Länk 2</a>
  <a href="#länk3">Länk 3</a>
  <a href="#länk4">Länk 4</a>
</div>


<div class="main">
  <h2>Innehåll</h2>

  <div class="gallery">
    <a><img src="https://vectortoons.com/wp-content/uploads/2017/05/basketball-emoji-collection-1-002.jpg" alt="Fotot kunde inte hittas">
  </a>
  <div class="desc">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

  <div class="gallery" id="pic2">
    <a><img src="https://vectortoons.com/wp-content/uploads/2017/05/basketball-emoji-collection-1-002.jpg" alt="Fotot kunde inte hittas">
  </a>
  <div class="desc">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

  <div class="gallery">
    <a><img src="https://vectortoons.com/wp-content/uploads/2017/05/basketball-emoji-collection-1-002.jpg" alt="Fotot kunde inte hittas">
  </a>
  <div class="desc">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>


 
<div class="text">
  <hr>
  <div class="clearfix">
  <img class="img2" src="https://vectortoons.com/wp-content/uploads/2017/05/basketball-emoji-collection-1-002.jpg" alt="Fotot kunde inte hittas">
  
  <p>Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.</p>
  <p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi.</p>
  <p>Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis.</p>
  <p>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<hr>
<footer>
<p>Skriven i HTML5</p>
</footer>
</div>


</div>

     
</body>
</html>
Rainbow
  • 6,772
  • 3
  • 11
  • 28
  • Oh that actually help! Wow! However the text is now hiding behind the Meny bar... What oculd that cause it? – CDNthe2nd May 04 '18 at 14:16
  • It's your absolute positioning, the menu bar is absolute and you're pushing the main using margins. – Rainbow May 04 '18 at 14:20
  • Ohhh, The Margin-top I believe in that case? – CDNthe2nd May 04 '18 at 14:23
  • 1
    no your menu bar is absolute causing it to overlap on top of the other elements, remove it and also remove the position:fixed, then the margins won't be necessary – Rainbow May 04 '18 at 14:24
  • I just saw you edit, Which worked very well for Phone but not that good when it came to desktop! – CDNthe2nd May 04 '18 at 15:00
1

What is happening is due to absolute position of the menu bar and the .main 100% margin-top.

Why should margin-top: 100% (100% width of containing block) be enougth to don't let the div with main class under the div with sidenav class?Please check this question Margin-top: 100% gets parent width value... strange

Here is my fiddle. Please check the main class in your media query.

Of course is just to let you understand the problem and make the things work "as they are".

Is a real case of course i would at least let javascript calculate that margin-top absolute value in pixels. This way, in case menu changes somehow you don't need to edit your css.

https://jsfiddle.net/8up8yc4h/2/

@media only screen and (max-width: 824px) {
    .sidenav{
        width: 100%;
        height: auto;
        position: fixed;
    }
    .main{
        width: 100%;
        padding:0 0 0 0;
        /*margin-top: 100%;*/
        margin-top: 528px;
    }
    div.gallery{
        float: none;
        display: inline;
        width: 100%;
    }

    #pic2 {
        padding:0px;
    }
    h2{
        padding: 10% 0 0 20px;
    }
}
Giacomo Penuti
  • 1,028
  • 11
  • 14
  • Oohh there we go! You are actually right! Well I think I got everything solved now actually! – CDNthe2nd May 04 '18 at 14:25
  • I appreciate your time and honestly thank you alot for the help! You guys are live saver for everyone in coding! – CDNthe2nd May 04 '18 at 14:26
  • The meta Tag is still needed, also using fixed margins isn't a healthy way of doing things. – Rainbow May 04 '18 at 14:31
  • Thanks CDNthe2nd . @ZohirSalakCeNa According to the op problem that was overlapping of two divs, meta tag is not a solution. – Giacomo Penuti May 04 '18 at 14:36
  • Well remove it and try the chrome phones simulator :) – Rainbow May 04 '18 at 14:37
  • @ZohirSalakCeNa Sorry, i can't see any change in chrome dev tool. What should be noticed? – Giacomo Penuti May 04 '18 at 14:49
  • `The screen's simulator` without that tag element the media query doesn't apply. – Rainbow May 04 '18 at 14:53
  • @CDNthe2nd if you want the menu to be fixed on top from mobile you need .sidenav position: fixed and not position: absolute as in fiddle in your media query. That is the reason i suggested you to add margin top on main. If you don't want the menu fixed on top, you can remove .sidenav absolute positioning from your media query, as well as margin-top from .main . – Giacomo Penuti May 04 '18 at 14:55
  • @ZohirSalakCeNa Got it!Did not see in op's video that with chrome was goin beyond the 884px. – Giacomo Penuti May 04 '18 at 14:59
  • Oh I see! Yeah you are right, I mean right now it does work as I want, Maybe not beautiful code to see since it seems like the CCS is pretty messy... but somehow magical it works. – CDNthe2nd May 04 '18 at 15:00