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

Home Forums Support CSS for Mobile Image Stacking on Author Box

  • This topic has 3 replies, 2 voices, and was last updated 4 months ago by Elvin.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1514950
    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; }

    #1515327
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1515334
    Dave

    That worked, thanks very much Elvin!

    #1515340
    Elvin
    Staff
    Customer Support

    That worked, thanks very much Elvin!

    Glad it works for you. No problem. 🙂

    A wise man once said:
    "Have you cleared your cache?"

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.