CSS Set something to align differently depending on screen resolution

Question

Here is the website i am developing...

http://camerabeanbags.co.uk/test/

This is responsive so if you take the web browser window and change the width you can see the website alter. If you look at the 'Your Cart' button on the top right of the green bar you can see it is aligned on the right. If you change the width of the web browser window it aligns to the left.

How can i change the width the web browser has to be before it aligns this to the left as i want it to do it only when there is no space for them to be next to each other. As on an iPad it aligns to the left but i want it to align it to the right. I have tried with the CSS @media but can't figure it out for this certain element.

Please can you help me with the CSS i need so it only aligns to the left at a certain screen width.

Thanks,

Harvey

Answer 1

In the CSS for your site, there is already a media query in place, which is what is causing the cart to move to the left. It looks like this:

@media (max-width: 767px) {
  #topbar .kad-topbar-left, #topbar .kad-topbar-left .topbarmenu {
    float: none;
  }
}

Above 767px, the style for those two elements is float: left.

If we delete that rule, so that the elements continue to float left, we can see that the cart will still fit in one row with the search up through 417px wide. So I would recommend simply revising the value in the media rule (using a rounder number):

@media (max-width: 420px) {
  #topbar .kad-topbar-left, #topbar .kad-topbar-left .topbarmenu {
    float: none;
  }
}