Search code examples
csscss-positionadaptive-layout

How can I keep things aligned in an adaptive layout

I'm building an adaptive design using CSS and I'm wondering how I can keep things nicely aligned. Two examples so far: my page: http://www.spabc.com/drupal/ now, I would like to keep the check-rates_btn aligned with the titleimg as the browser window resizes but due to the image being set a width of 95%, I can't really keep things aligned. I'd also like to keep the logo nicely aligned with the image i.e. where it hangs over titleimg, I want to keep the room that it hangs over = to the distance on the right side to the border of the titleimg. I tried to depict what I mean here: The distances depicted with red lines should stay equal. How do I do this?enter image description here

Solution

  • You will need to adjust the styles for check-rates_btn and titleimg accordingly using CSS Media Queries.

    Unfortunately, you are using Drupal and have too many cached CSS files for me to look through, but the ones I did look at (layout.css and system.theme.css) only had a few specific media queries that were not altering these classes.

    Hope this helps.