Hide One Element, Expand Another -- Mobile devices

Forum Moderators: not2easy

Message Too Old, No Replies

Hide One Element, Expand Another -- Mobile devices

expand element

Ann_G

9:13 pm on Oct 24, 2014 (gmt 0)

I’ve 2 floating columns, one with text (floats left) and one with an image(floats right). When viewed on mobile devices, I want the image to disappear and the text to expand across both columns. I made the image disappear with
@media screen and (max-width: 600px)
{#right { display:none; }}
But I can’t figure out how to expand the text across both columns.
Any ideas are welcome.

lucy24

2:19 am on Oct 25, 2014 (gmt 0)

What does the current CSS say about the width of the two elements? You'll probably need to change it at the same time that you turn off the image.

If the image is large, note also that that {display: none;} will not prevent any content from loading. Easiest fix is to make the image into a background image; then you can easily set the CSS to {background: none;} under the same circumstances that send the parent element to {display: none;}. Put everything into the same @media package to ensure that everything changes at the same time.

Incidentally, float-left and float-right for elements that are meant to go side by side seems redundant. Why not float just one or the other, or better yet set both to {display: inline-block} ?

Ann_G

5:54 pm on Oct 25, 2014 (gmt 0)

Thank you so very much for your help. I'll try it and let you know the results.