Everything moves about when screen is resized

  • I’ve just built my first website, and finally have it looking the way I want it. The problem is, when I resize the screen, everything moves about, including widgets, navigation etc. It looks terrible on mobile devices! Ideally, I’d like everything to stay in roughly the same place in the centre of the screen when zooming in or out, just getting bigger or smaller, without the horrible overlapping that’s happening at the moment.

    I’ve made a lot of changes to the CSS getting everything in the right place on my site, and I’ve probably created these problems myself. You can see what’s happening here: https://www.ohstencopywriting.com/

    I know others have had the same problem, but the answer seems to always be site-specific. I’m not good enough with CSS to know what I need to change to get it looking ok, so it would be wonderful if someone could take a look and tell me how it can be fixed.

    [Large code excerpt removed by moderator per forum rules. Please use the pastebin for all large code excerpts. It works better anyway. — There’s no need to paste CSS, since we can use Firebug or Chrome inspector to view it.]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi Johsten,

    Sorry to hear that you’ re not happy with my theme, but I did make the site responsive – hence the reason why everything moves when you resize your browser.
    I also spent a lot of time making sure that it looks good on both phones and tablets.
    I’m afraid that, yes, the changes you made affected the CSS.

    If you want to adjust the “responsiveness”, you will have to go through the media queries at the bottom of the CSS and adjust the widths. It’s impossible to give you precise information as so many changes were made.

    You could try to remove this line:
    ‘<meta name=”viewport” content=”width=device-width” />’
    in your header.php
    You should add that file to your child theme first.

    Thread Starter Johsten

    (@johsten)

    Thanks for your reply, Christine. I’m very happy with your theme, I’ve clearly just made a lot of changes that don’t work very well with it :/

    I tried removing the line in header.php, as well as adjusting media query widths on the CSS, but unfortunately nothing seems to be happening.

    I think the problem is mainly with widgets I’ve added. I’ve got rid of the large image of me that was in the top left (bit narcissistic anyway), and moved other around a bit, and it already looks much better, even on mobile. I think I had overloaded it with widgets that didn’t all fit in when the screen was made smaller.

    Great theme. Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Everything moves about when screen is resized’ is closed to new replies.