Mobile image and text

  • Hi, your css advised in previous post works really well for setting image to left and title to right in mobile view but it also affects the desktop view which is already great. Is there a way to stop this css affecting desktop layout?

    Thanks again.

    .wp-show-posts-inner {
    display: flex;
    flex-direction: row;
}

.wp-show-posts-image.wpsp-image-left {
 float: left;
 margin: 0 10px 0 0;

}

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Elvin

    (@ejcabquina)

    Hi @rob33 ,

    We can wrap it in @media rule so it only applies on mobile.

    Example: Apply it only on mobile devices (not tablets)

    @media(max-width:768px){
.wp-show-posts-inner {
    display: flex;
    flex-direction: row;
}

.wp-show-posts-image.wpsp-image-left {
 float: left;
 margin: 0 10px 0 0;

}
}
    Thread Starter rob33

    (@rob33)

    Thanks a lot.

    The text is flush against the image in mobile however. Possible to add a slight gap?

    Plugin Support Elvin

    (@ejcabquina)

    You can add in more margin if you want.

    Example:

    @media(max-width:768px){
.wp-show-posts-image {
    margin-bottom: 35px;
}
}
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Mobile image and text’ is closed to new replies.