Jump to content

Scaled Content/Browser Resizing


Recommended Posts

So, I am creating a website for fun, and I am new to this. I have just added a nav bar and some pictures and have figured out how to center them. Now, my dilemma is making sure that they stay in place when I resize the browser. Can anyone help with this? I have centered the nav bar and the images but that gets moved around when I resize the browser (I am using Safari and FireFox). For example, the nav bar, at the smallest browser size is perfectly centered, but if I make it smaller, everything gets moved around, and I want to make sure things stay the same regardless of browser size. 

Link to comment
Share on other sites

That i wouldn't know, because the only person here who knows what their current html layout is, so i can suggest a solution is you! Most of time you will use media queries which allow you to adjust widths of elements depending on browser viewport width.

Edited by dsonesuk
Link to comment
Share on other sites

lol I see what you mean, and maybe I didn't explain myself correctly as I am new to creating websites and html and css. So, what I want to do has not so much to do with a particular browser like, say, Safari, Opera, or Firefox, but it has to do with what happens when you are resizing a window.For example, with Safari, I press Command and + to enlarge the content within that window as much as it can, the max, or I press Command and - to decrease the content within a window to the minimum it can do. And when I do this with pages like this one I am typing in, the content within them becomes smaller like using a font size but the elements do not move from their places. The elements do disappear after you begin at enlarging at a certain size but when you make them the smallest, everything remains there. Now, I understand when enlarging, some elements will disappear because of the enlargements and that's fine. But the elements stay within their places, they do not move from their blocks or inline-block assigned displays. So, that is what I want to achieve. I wish I could upload a screenshot here, but I am not allowed. I have maxed it out my allowable sharing of screenshot space. But let me try to show you visually 



1.) LINK      LINK.    LINK      LINK      LINK (normal window...total of 5 links here)

When I resize to either smaller or larger, this happens:

2.) LINK.   LINK.   LINK

    LINK.  LINK  (this is what happens when enlarging....no links disappear in my site....but in the ws3 links begin to disappear the larger to enlarge the content of the page...so in essence I am speaking of enlarging the content or making it smaller....not necessarily maximizing or minimizing the window itself...though the links do begin to disappear as you minimize the window.....anyways, the idea is changing the content size as well as have the ability to maximize or minimize a window size and have the elements remain in place as well as prevent them from disappearing).

3.) If I have centered a nav bar and the content in a page:

Then everything stays in place centered 


More specifically, if you want a visual of what I mean, go to the ws3 site: https://www.w3schools.com/html/default.asp

and click command and + or command - and see what happens (Safari)


I don't think I want it exactly like that because in the ws3 site, the Navigational Bar, as I enlarge the page, some of it's nav links disappear. And I don't want that to happen to my site. 


Hopefully, I haven't over-explained myself. lol Oh and after typing all this, I went into photoshop and resized images so I could be allowed to upload lol 

Screen Shot 2019-12-06 at 11.05.18 AM.png

Screen Shot 2019-12-06 at 11.02.14 AM.png

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...