Mobile view pictures too narrow to text and frame around pictures needed

Home Forums Masonic Free Mobile view pictures too narrow to text and frame around pictures needed

This topic contains 11 replies, has 2 voices, and was last updated by  Ashish 2 months ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1385221

    beetee
    Participant

    Is I look on my page on the mobile phone

    or on the mobile view in the customize section

    the text is very narrow to the pictures compared with the view on the desktop.
    How can I get this distance a bit wider?

    The second question, at the moment I use a plugin to create a white border around the pics,
    but the plugin is abandoned.
    How can I get a white border around the pics using CSS?
    THis are my current settings

    #1385477

    Ashish
    Moderator

    @beetee
    Please add this CSS to make text to take full width:

    body p {
        text-align: justify;
    }

    While checking your site, there’s already a white border around image. What do you want to change about that?

    Thanks.

    #1385495

    beetee
    Participant

    Re the border, as I wrote I use a 3rd party plugin at the moment but that’s abandoned.
    So I would not like to use it in the future.

    TNX

    #1385496

    beetee
    Participant

    Re the text being too narrow at the pics in mobile view, that can’t bee the correct code, as now the text is justified 🙁

    #1385633

    Ashish
    Moderator

    @beetee
    Please add this CSS to Customizer Additional CSS box for while border around image:

    article img {
        border: 2px solid #FFF !important;
        
    } 

    Also, since text align left would leave some space in the row where text is less, it will result issue as you mentioned above. So, a appropriate solution would be the above CSS. If you do not want that, you can remove that CSS. Thanks. 🙂

    #1385641

    beetee
    Participant

    Thanks a lot, the white border works. This problem is solved.


    Also, since text align left would leave some space in the row where text is less, it will result issue as you mentioned above. So, a appropriate solution would be the above CSS. If you do not want that, you can remove that CSS. Thanks

    Do you talk about this code in connection with the text too narrow?
    body p {
    text-align: justify;
    }

    There is no difference in the distance with or without the code.
    To make it clearer, the phenomenon is only visible in the mobile view,
    and it’s only the bottom. At the side there is a distance

    Regards,

    Bee

    #1385760

    Ashish
    Moderator

    @beetee
    If the issue is those text aside image in mobile, the issue come as the image is left align. If you make image not align left, it should fix the issue. If that’s not the issue, please explain in detail. Thanks.

    #1385763

    beetee
    Participant

    If you look at the screenshots, you will clearly see that the text touches the bottom of the picture. On both screenshots.

    There is not much distance between bottom of the picture and text. May be one or two.

    #1385764

    beetee
    Participant

    If you look at the first screenshot, you see 20 pc distance between top of the picture and the text and you see the same of the riright side of the pic. Just the text underneath the pic is glued to the pic…

    #1385898

    Ashish
    Moderator

    @beetee
    Please add this CSS:

    article.blog-post img {
       margin-bottom: 10px;
    }
    #1385903

    beetee
    Participant

    THNX a million that was the solution 💘💖💕💞❣️

    #1386119

    Ashish
    Moderator

    @beetee
    Glad to know it worked for you. 🙂 If you get any issue later, feel free to ask again! I hope you liked our theme, if so, you can help us by providing a review us here: https://wordpress.org/support/theme/masonic/reviews/?filter=5

    Thanks.

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Mobile view pictures too narrow to text and frame around pictures needed’ is closed to new replies.