Home Forums Weaver Xtreme Theme specify different image alignments on desktop and mobile

Topic Resolution: Resolved
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #70572
    Area33
    Participant

    I want to align an image in the body of a post either to the right or left on desktop, but always center it on narrow mobile screens (480px or smaller).  Is this possible?

    If that is not possible,  can I specify that images in the body of a post be displayed at 100% width on mobile?

     

    https://areathirtythree.com/blog/

     

    #70573
    scrambler
    Moderator

    You can definitely do that with CSS and using the mobile class as explained in the guide article below for both featured image and content images.

    Posts: Changing Featured Image Layout on Mobile – Weaver Xtreme Guide (weavertheme.com)

    For example to do that on all the posts of your blog page, you could add the rule below to the Theme Global Custom CSS Rule box

    .blog.is-phone .wvrx-posts .alignleft {float:none !important;margin-left:auto !important;margin-right:auto !important;}

    If it does not work, post back with the rule in place

     

    #70574
    Area33
    Participant

    It works for the home page.  On individual posts, images are still not centered.

    #70575
    scrambler
    Moderator

    Add the selector for the single post pages

    .single.is-phone .alignleft, .blog.is-phone .wvrx-posts .alignleft {float:none !important;margin-left:auto !important;margin-right:auto !important;}

    And if you also want to target aligned right add this one

    .single.is-phone .alignright, .blog.is-phone .wvrx-posts .alignright {float:none !important;margin-left:auto !important;margin-right:auto !important;}

    #70576
    Area33
    Participant

    Works great.  Thanks.

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