[Support request] CSS for Mobile Image Stacking on Author Box

[Dave]

Hi Guys,

I decided to use a Hook and some CSS for my author box instead of a plugin and I’m really happy with it. I just have one question: is there a way I can code it so that on mobile, the image stacks on top of the name and text, instead of having the text wrap around the image?

You can see what the author box looks like here: https://www.irreverentgent.com/stores-like-madewell/

And here’s the CSS I’m currently using:

#authorBox{
background: #fff;
border: 1px solid #cb9558;
padding: 10px;
overflow:hidden;
color: #333;
margin-top: 30px;
}

#authorBox h3{
font-size: 20px;
color:#333;
margin: 0;
padding:10px 10px 5px 10px; }

#authorBox h3 a{
text-decoration:none;
color: #333;
}

#authorBox img{
margin:5px 10px 0 5px;
padding:5px;
float:left;
width: 110px;
height: auto;
}

#authorBox p{
color:#333;
font-size: 15px;
margin:0;
padding:0px 10px 10px 10px; }

[Elvin]

Hi,

You can try adding this CSS:

@media(max-width:768px){
#authorBox img {
float: none;
width: -webkit-fill-available;
}
}

Where’s using @media query for mobile to change the float to none so the the text wraps under the image.

The width property is optional. Although, you may wanna consider adjusting it.

[Dave]

That worked, thanks very much Elvin!

[Elvin]

That worked, thanks very much Elvin!

Glad it works for you. No problem. 🙂

[Author]

Posts