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?
Asked
Active
Viewed 53 times
0
stdcerr
- 13,725
- 25
- 71
- 128
-
There's many ways, you just need to learn some basic HTML & CSS. You can put the image in a container and then put the logo in the same container and adjust the position. – frontsideup May 08 '15 at 13:33
1 Answers
0
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.
cfnerd
- 3,658
- 12
- 32
- 44
-
so you're saying I basically need to "re-adjust" my layout as the screen shrinks in different `@media` "steps". Is that really true? `layout.css` and `style.css` contain the definitions for the above elements. – stdcerr May 08 '15 at 13:52
-
@cerr, yes, that is correct. Based on the size of the screen, you can assign different styles to the elements to get them to react the way you want them to. layout.css has a few media queries in there already that you can use as an example. – cfnerd May 08 '15 at 13:53