0

I am making my webpages responsive but struggling to keep elements on the page not to go over each other. I am quite new to web development so I don't even know how to approach the issue. I would really appreciate some general suggestions at this stage to help me to get my head around it and move forward.

Max Visna
  • 41
  • 6

1 Answers1

2

A few suggestions to get you started.

Begin by including a viewport meta tag in the head of your document, this will stop smartphones and tablets from scaling your page to fit the viewport (screen) 

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

Use CSS to define element sizes because then you can restyle elements at different viewports. Also try and avoid including hard pixel dimensions for any elements because they will likely cause problems on small screens, opt for a width of say 100% over 960px

There will be times where you need to change the layout on small screens. For example two side by side images, each with a width of 50% may not work on a smartphone. When this happens, use media queries to change your layout

CSS 

img{
 width:50%;
 height:auto;
}

@media screen and (max-width:400px) {
 img{
  width:100%;
 } 
}

Hope this helps get you going!

Update

See if this is closer to what you are after (note the placeholder images may be slow to load):

live view - http://s.codepen.io/panchroma/debug/ZOqgzx
edit view - http://codepen.io/panchroma/pen/ZOqgzx

The important bits are:

  • in your HTML I've removed the inline styling you had for the images and moved it to the CSS starting at line 65
  • starting at line 134 in the CSS I've built out the @media styling for narrow viewports. Note that I've collapsed your 2 column layout to a single column layout as well. This detail is completely optional but gives you more room to work
  • at line 4 in your HTML you have <link href="index_responsive.css" rel="stylesheet" media="screen and (max-width: 800px)" /> . Technically here's nothing wrong with this, though it's more common to use the one style.css file and include everything in that one file, and the @media screen ... statement and styling in that style.css file
David Taiaroa
  • 25,157
  • 7
  • 62
  • 50
  • Hi David, I really appreciate your response. Thank you. I have implemented html and css code exactly as you wrote in your response, but situation on my pages unfortunately stayed stable. Do I have to customize anything in viewport meta tag in order to get it working? And in terms of media queries, do I have to mention media query anywhere in html code? Thank you in advance and I really appreciate your help. – Max Visna Aug 05 '16 at 22:45
  • Hi @MaxVisna, the viewport meta tag should work exactly as it is, and there's no need to mention the media query in the html code, it only needs to be present in your CSS file. The most likely reason that the layout still isn't working as intended on narrow viewports is CSS related. Maybe some other CSS styling is taking precedence. Using Chrome web inspector is the easiest way you could troubleshoot this. Alternatively, can you post a link to your page, or start a pen on http://codepen.io that illustrates your problem? – David Taiaroa Aug 06 '16 at 10:55
  • Hi David. Here is the link to a git hub where the code of my page is. HTML and CSS included. https://gist.github.com/anonymous/f20c03aea884056919cf522914ac3ba3 – Max Visna Aug 06 '16 at 22:13
  • Hey @MaxVisna, thanks for the extra details, please see my update above.I hadn't pictured that the images that caused you trouble were in a side column, my update has a better solution for what you are after. It's still not perfect, you'll need to fine-tune or simplify your paddings and positioning , I think you are a lot closer now though :) – David Taiaroa Aug 07 '16 at 16:49
  • Hi David, Thank you so much helping me out with it. I will have a closer. look now. – Max Visna Aug 07 '16 at 19:04
  • David, it fixed the pages. I am trying to make my other pages responsive. I implement the same principle however it doesn't work on those pages. The layout is slightly different. All elements of the page are placed in the centre. There are three elements per list. One picture, one title and teaser of the article. Title seats in a div, image sits separately and so is the teaser. Do you reckon it will be worth redoing a layout specifically for smaller screens or there should be a way to change it all in one go? I want when screen gets smaller to elements go in the order: title, image, teaser. – Max Visna Aug 07 '16 at 22:00
  • Hi @MaxVisna, as a general suggestion, if you have pages with very different layout one approach is to give different classes to the body tag on pages with a different layout. Then it's easier to target and style elements on different pages. I haven't seen exactly what you are trying to achieve, though I think it's likely you can do it with one style sheet. And the simpler you can keep your layout and styling, the simpler your job will be. – David Taiaroa Aug 08 '16 at 03:44
  • David you are a star. I put all elements in different classes and made a page responsive in an hour. Thank you a lot for your help. Yo gave me a boost. God knows how many hours I would have spent researching how to fix it. – Max Visna Aug 08 '16 at 21:50
  • > I put all elements in different classes and made a page responsive in an hour. ... excellent, thanks for letting me know @MaxVisna – David Taiaroa Aug 09 '16 at 02:33
  • Hi David, hope you had a nice weekend. I managed to get all my webpages responsive. However when I am gradually minimising the web browser elements on the website are running on to each other before browser gets to a screen size I specify in the media query and then it gets fine again. I struggle to understand what the issue might be as I checked in css and I set up margins in % in order to keep elements of the website away from each other. I remember you mentioned paddings. Could you elaborate how they can help with this sort of issue? – Max Visna Aug 14 '16 at 20:34
  • Hey @MaxVisna, using the CSS in http://s.codepen.io/panchroma/debug/ZOqgzx as an example, for the .right_column div you have padding:0.5%. Personally I would use a fixed px value here because then it's easier to work with and not always changing as the viewport changes. The left:-2% also looks problematic to me, and difficult to work with, is there are reason why you couldn't remove this, and if needed adjust the positioning with padding-left? My vote in general would be to use % for sizing and px for positioning. Hope this helps – David Taiaroa Aug 15 '16 at 19:10
  • Hi David. I see now. I thought % are needed to be used in both. Good to know now. I will definitely change that in my code. Hopefully it will work. Thank you once again for your support. – Max Visna Aug 15 '16 at 21:33
  • Hi David, your suggestion as always worked. However, now I have slightly different problem. Basically when I start minimizing webpage my all elements tend to stay on the right position and not floating with the page to stay in centre, as this is their original position. I am not sure what is causing that. If you want to have a look at the code it is here: – Max Visna Aug 16 '16 at 22:04
  • sorry, wrong one. here is the working one https://gist.github.com/anonymous/9d1b16863eb98da852a2bbc0c430bbdb – Max Visna Aug 16 '16 at 22:05
  • Hey @MaxVisna I'll check this out when I have a chance – David Taiaroa Aug 17 '16 at 15:13
  • @MaxVisna, check this out http://codepen.io/panchroma/pen/KrEbJg . I figured you were testing different ideas so I just focused on the first list item. I marked my CSS changes, in the HTML I removed the height / width attributes you had for the images and moved the sizing into the CSS – David Taiaroa Aug 17 '16 at 23:57
  • Hi @David Taiaroa. Sorry this is off topic but I faced a problem with the extra spacing between the end of content and bottom of the page. All procedures I know, like footer div wrapper and body are not doing the job. However they do on my other pages. I suspect something within some of the elements is causing the issue. Could you have a look? I posted the code here:https://gist.github.com/anonymous/b9eb9f0a28daf1cbd8ff91f5ded1afc1 – Max Visna Sep 10 '16 at 16:49