Posted by beckyjohnson on May 8, 2013 at 3:18am
I have a site here: http://verilan.right-brain.net/ This is my first responsive site ever. My question is, even though I have max-width:100% on my images, when the theme gets pushed down to 740px in width, the images resize and get bigger than they were when they were in tablet mode and end up overwhelming the text when viewed on a phone. How can I solve this or am I just approaching this wrongly?
Thanks for any input,
Rebecca
Comments
Hello, It seems that you have
Hello,
It seems that you have some floats in your .front #region-header-first and #region-header-third, you can remove these floats from global.css and add them to default.css (to preserve your current tablet layout) and it should work then.
Ok, I did that and I don't
Ok, I did that and I don't think it worked. If you have a moment, refresh it in your browser. Also what exactly is the purpose of the default.css?
Oh ok actually it did work. I
Oh ok actually it did work. I had to adjust the css some more. At the moment I am focused on the iphone and I'm not sure what to do to get images to shrink down EVEN MORE so that I can have at least those two 280x 160 images be side by side, horizontally, when the iphone is in horizontal mode. Any more advice?
you could add a mini media
you could add a mini media query inside your global.css to specify the size for the horizontal mode.
/* Smartphones (landscape) ----------- /
@media only screen and (min-width : 321px) {
/ Styles */
}
You can see some examples here:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Caveat
I ran into an issue with this -- specifically adding media queries inside global.css / *-default.css / *-narrow.css / *-normal.css / *-wide.css -- when enabling CSS aggregation & compression!
The media queries were no longer working. I didn't test it but I believe this is also a concern for stylesheets defined in the theme's .info file with media queries (i.e. stylesheets[screen and (max-width: 600px)][] = layout.css)
This thread on stackoverflow explains the issue...
Before the setting is enabled, Drupal uses conditional @import rules for those CSS stylesheets that are defined with media queries (like in your theme's .info file, or the various Omega layout stylesheets), so that works fine when you're developing. After enabling compression and aggregation, Drupal combines all that into a CSS file with @media query rules, so it becomes:
@media screen and (min-width: 240px) {/* Additional CSS for landscape view */
@media screen and (min-width: 321px) {
/* CSS */
}
}
Which is only supported by Firefox right now, even though this should be supported as per the CSS3 spec.
The resize its working for me
The resize its working for me now... the 640 x 340 image stacks below the smaller images in mobile size. Are you triying to achieve a specific lauout for them in the mobile size?
You can add the floats to narrow.css, but since this property will act without being overriden in narrow,normal,and wide, it could be added to default.css.
You can read about the inheritance of these sheets at:
http://drupal.org/node/1298700
I think the problem may be
I think the problem may be that I don't have a tool that simulates the iphone accurately. I have no idea what it looks like on iphone5 . I am using iphoney for the iphone 4 right now. It's starting to look more like how I want it though. What I want is smart phone/ iphone landscape the two smaller images go side by side across the screen an the vertical they just stack, which is happening already.
Two questions: 1. can I center the 280 by 160 images some how on the landscape? Kind of even out the space on each side of them?