Streaming live at 10am (PST)

Menu moving to left when going to smaller screen


#1

Hello,

I cant seem to centre my menu on the desktop. Its setting just a little over to the right. when the page goes to a smaller screen its mves way over the left. Any ideas how to fix that?

The page is called 'Gran Canaria Page' so its not the home page.

Read only link:
https://webflow.com/design/wodholidays?preview=d22fd65361c628db762b45184718fe88

Thanks


#2

Your menu has a left float active on the portrait phone view. If you remove the float from that view it will take on the right float from the higher level views.


#3

@emcgregor what you need to do urgently, is to replace the big background image on your hero section.
You cannot use a 6.84 Megabyte image, try to compress and/or reduce size.
Neat refreshing design you have there.-


#4

@OrangePeel ah right, didnt know that, what does it effect? Can you recommend a size? Thanks


#5

@Davidn Hi David, Cant seem to fix that, Ive turned off the float for it and still doing the same thing, maybe Ive done it wrong. Could you provide a screenshot please? Thanks again


#6

For an image of that size you probably want to end up around 250kb. Not more.
Try this one to compress and optimize the image:

http://www.imageoptimizer.net/Pages/Home.aspx


#7

Think of web usability, the smaller the file size the faster your website loads
For mobile versions having a big size file is no good. Even for desktop.
When exporting it (if you are using some Photoshop tool or similar) Save it for web
and check the estimated exported file size. As for picture dimensions it depends but
i think something 2000px width and keeping the ratio will be just fine.
It will depend on the max resolution size your site is really intented for.


#8

Hi @emcgregor, The menu may be sitting to the right due to left padding (see attachment) Maybe try having the same amount of padding on left as right (15px each instead of 30px only on the left side)

If you adjust this, does it help resolve the problem?


#9