Content Shifts Between Screen Sizes (On Desktop)

Ask the community
1

Hi community!

First off, I have still a newer and less experienced Web Developer. My question is, on a current website I am finalizing, all my contact shifts and moves around depending on different screen sizes, in desktop mode. (Don’t get me started with mobile!).

What I mean is everything looks perfectly on my desktop’s monitor, but then I switch to my laptop (15" screen) and everything just shifts.

I’ve tried messing with fixed/fluid display settings, but I can’t seem to get it to adjust properly to all screen sizes, on desktop.

Any tips? Thank you! :slight_smile:

2

Can you please share a link?

Typically in the responsive environment you are dealing with percentages to establish the distance an element is from top, bottom, left, right or all.

My unwanted shifts occur when the object itself is set to % and not a fixed pixel size.

The use of containers and grids are also supplement to retaining desire layouts throughout the break points.

Teejay

3

Here is the page I continue running into issues with: Spa | Mirbeau Plymouth (editorx.io)

If you scroll down to the repeater (midway through the page), that’s normally where everything starts shifting. Most of the other content stays the same.

Thanks for your help!

4

Great. I can see what is wrong. You are dealing with a menu that gets covered by the Book button.

First, why do you have two really big menus which is confusing to me. I would minimize some of the items in the horizontal menu to make it look less of a main menu and leave only the best call-to-action items, i.e. Make a Reservation & Book a Room. Two HOME buttons is redundant and takes up space.

Secondly your menu items needs to be spaced more evenly. You can do this by UNSELECTING that menu items are all the same size, but select items to be filling the whole menu.

1074×978 70 KB

Because you logo, on the left, and button and menu are fixed, the horizontal menu container can not be, unless your remove some elements and make it smaller.

First, I recommend, not necessary, adding a container with a grid to the header. The grid would have 1-row and 3-columns.

Row = height 100px

Column 1 = .2 fr with min-width the actual size of the logo
Because you want a fixed logo always the same relationship to the left edge, I would center/center the image in the column

Column 2 = 1 fr
Follow the instructions above and allow the menu to compress. Again, I highly recommend having just 3-4 items max up there. That way it won’t appear like a main menu, confusing people as to why there is another menu over to right.

Have the items FILL THE WHOLE MENU and make sure they are NOT THE SAME SIZE

Column 1 = .3 fr with min-width the actual size of the button and menu icon
Because you want these items to remain the same and always have the same relationship to the right edge, I would center the button and menu icon horizontally on the row.

You now have to watch how element behave all the screen contracts. Your variables to allow for good spacing are the column 1 & 3’s widths, the space to the left of the logo, the space between and to the right of the button and menu item.

The menu will contract on its own.

I hope this helps.

Teejay

5

If you didn’t want to use a container with grid, you could simply dock the logo to the left and top, center the menu with a percentage width that includes min/max pixel and dock to the top, and then group the button and hamburger menu icon and dock it to the left and top.

6

Amazing!! Thank you so much for your help :slight_smile:

Have a great rest of your day!

7

Forgot to mention that you will need to adjust this as you go down in screen size. The easiest thing to do it hide the horizontal menu and delete the center column on the tablet and mobile screens. Cheers