Padding area problem help

[ralphm]

You can’t just try this?

[graphicNerd]

So font-size: 1.1em is just okay?

[graphicNerd]

Im done with the front page.

Any advise?

shoegame

[graphicNerd]

Why is it from the two sites, my cart icon is just doing fine?

Google chrome:

Screenfly / Test Your Website at Different Screen Resolutions

Cart broken:

Testing responsive web design in various resolutions | ResponsiveTest

[PaulOB]

HI,

You don’t need all those responsive tests just open the site on the desktop and drag the right edge of the browser smaller and you will see that around 1199px width the cart text drops down because it doesn’t fit n the 50% width you assigned for header-right.

A quick fix would be to change the header-right to 55%.

headerRight {
    float: left;
    width: 55%;
}

However that is effectively a ‘magic number’ based on the content you have and is not a reliable way to code. You would be better off using a display table/table-cell approach for that header (or flexbox) and avoid all the fixed percentage widths.

Have 3 cells across with logo in the first cell (aligned left) and then the menu in the second cell (centered) and the cart in the third cell aligned right. You probably won’t need any widths (apart from 100% width on the display:table-wrapper) at all and then just throw in a media as required. In that way you can change menu items or increase text safely without anything breaking.

[graphicNerd]

I did fix the cart area.

Shoe Game