Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #883027

    Good day, support.
    I need the feautered image of post to be in mobile version too.

    https://netpics.org/image/GN0QO
    https://netpics.org/image/GNolf

    Thank you in advance!

    #883059

    Hey,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    @media only screen and (max-width: 767px) {
    .responsive .template-blog .blog-meta {
        display: block;
    }}
    @media only screen and (max-width: 480px) {
    .template-blog .post .entry-content-wrapper {
        width: 100%;
    }}
    

    Best regards,
    Yigit

    #883093

    Thank you, Yigit.
    Unfortunately, it’s not I wanted to see. The width of feautered image in mobile version is not 100% of block.
    I mean the feautered image to be 100% in mobile version like in enfold option of Single Post Style “Single post with big preview image (featured image)”.
    Because I use Single post with small preview image.

    • This reply was modified 2 weeks, 3 days ago by  AliAbabwa.
    #883937

    Hi,

    That is because image size is 180x180px. Please try following
    1. Install this plugin: https://wordpress.org/plugins/simple-image-sizes/
    2. Go to Settings > Media
    3. Change the square image size (increase its width / height).
    4. Regenerate the thumbnails by clicking the button at the bottom.

    Best regards,
    Yigit

    #883950

    Dear Yigit.
    Look Private Content, please. It doesn’t work((

    #884232

    Hi,
    Your images are still 180px square, and there is also 50px right margin keeping it from going full width. But we can adjust with this css if you wish:

    @media only screen and (max-width: 426px) { 
    .single-post .single-small.with-slider .small-preview {
        width: 360px!important; 
        height: 360px!important; 
    }
    img, a img {
       max-width: 360px!important; 
    }
    .template-blog .blog-meta {
        margin-right: 0px!important; 
    }
    }

    2017-12-02_203929

    Best regards,
    Mike

    #884618

    Thank you for answer, Mike.
    This code does not work.
    Look at video question in Private Content, please.

    #885341

    Hi,
    Thank you for the video, the code I gave you was for mobile phones @ 425px width, I see now your going down to 375px. Please try this new code for both:

    @media only screen and (min-width: 393px) and (max-width: 426px) { 
    .single-post .single-small.with-slider .small-preview {
        width: 360px!important; 
        height: 360px!important; 
    }
    img, a img {
       max-width: 360px!important; 
    }
    .template-blog .blog-meta {
        margin-right: 0px!important; 
    }
    }
    @media only screen and (max-width: 392px) { 
    .single-post .single-small.with-slider .small-preview {
        width: 320px!important; 
        height: 320px!important; 
    }
    img, a img {
       max-width: 320px!important; 
    }
    .template-blog .blog-meta {
        margin-right: 0px!important; 
    }
    }

    When testing please use the developer tools and choose between the two mobile sizes:
    2017-12-05_214207
    This is because the code is written with image sizes and not percentages needed to calculate every possible size.
    Mobile phones come in mostly two sizes, 375px for older & smaller, 425px newer larger. Hope this makes sense.

    Best regards,
    Mike

    #885550

    Dear Mike.
    I use this css code, but still no effect.
    Maybe you misunderstood me.

    Look at video question in Private Content, please.
    P.S.
    I apologize for the background voices in video, the workflow…))

    #885885

    Hi,
    Thank you for the video, but the point I was trying to make was that many of the screen sizes that your method produces are not used in real world devices. Such as your smallest 265px, to achieve what you want would take some extensive coding. But we can help you achieve screen sizes for devices that your visitors would be using, such as iPhones & Android, here is how your site would look on those devices:
    2017-12-06_204936
    Please see the video in Private Content area.
    Thank you again, and I hope this helps.

    Best regards,
    Mike

    #886062

    Thanks a lot, Mike.
    I understand you.

    #886307

    Hi,
    Does this code work for you? Shall we close this now?

    Best regards,
    Mike

    #886462

    Yes, it works, thank you.

    #886606

    Hi AliAbabwa,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

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

You must be logged in to reply to this topic.