Hi there… I am having a small issue. Please open the link below
http://steelcitycreative.com/industrius/index.html
Please scroll to the heading that says “Reliable. Professional. Simplified.” I need the image on the bottom there, to stack above the “Reliable. Professional. Simplified.” heading when the browser is sized to below 480px. Any CSS tricks I can use to achieve this?
Thanks so much ahead of time!
What framework is this? Normally for different screen sizes you can assign widths per each screen size.
Right now that div is set to span7 (out of 12). That needs to be set to 100% width for mobile (via media query). You also need to restructure your HTML to put that span7 div before the span5.
Although I do question what sort of grid/framework doesn’t allow different screen size settings…
in html assign the image code first and float right… assign txt next and float left… both relative to container…
Then simply at 480px put float:none;
The image will change to display:block only which’ll force down the text to a new line
Good question… I took this project over for a client and am not quite sure what framework they used.
Thank you for the replies everyone I will try and tweak this.
If possible just set an id on that section and use a media query (max-width:480px) and unfloat them suckers (reset the width too.)
Frameworks…so aggravating to work with 
.
Yes they most certainly are… ugh!!
It was as simple as moving the div above the text content. Been looking at code too long. I shouldn’t have missed such an easy one 
Thanks everyone!!!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.