Bigger pictures

  • Author
    Posts
  • #97034

    Hi Ricardo,

    hope that all is well for you!

    I get pretty good feedback from the persons who are visiting my site.
    However I get a common feedback really often and it’s why I created this new topics.

    Could it be possible to get my images wider/bigger in the featured zone on the main page as also the images wider/bigger in the post pages.

    Thank you for your usual assistance.

    Best regards,
    Philippe

    The blog I need help with is philippecastagna.com.

    #97132

    ricardpriet
    Theme Author

    Hi Philippe.

    mmmm, this is a challenge! Let’s try the following CSS:

    @media (min-width: 1350px) {
    .single .entry-thumbnail img,
    .single .entry-content > img,
    .single .entry-content > p > img {
        max-width: 1800px;
        width: calc(100vw - 30px);
        margin-right: calc( (100vw - 1170px) / -2);
        margin-left: calc( (100vw - 1170px) / -2);
    }
    .single .hentry {
        overflow: visible;
    }
    }

    Note, max-width: 1800px; you have to set up this number of pixel equal to the img width or the maximum width you desire. This only works in silgle view of posts.

    Let me know.
    Thank you again!
    Ricardo

    #97133

    Yeah Ricardo it looks great… Let me go through and do some test on different devices then will let you know the definite feedback.
    Many thanks for your usual quick respond!
    Cheers,
    Philippe

    #97134

    Hi Ricardo,

    it looks good however I have some details that it would be great if you can take a look on it:

    – the images in the post are perfect and take the entire width. However on my main screen wich is 1920×1080 the image is against the border on the left side but it’s a bigger space on the right side. This gives an unbalanced feeling.
    – The pictures in the post in the body of the text are not affected by the snippet that you gives me. However on this post https://philippecastagna.com/2016/04/22/a-billingham-in-the-caribbean-the-hadley-pro-a-beautiful-product-for-a-great-experience/ as you can see the images with the text (not the featured) are also affected. I tried with the function to reduce the size of the pictures but this affect the resolution and not the size. I would like to have those images in the text smaller for a better balance with the text.
    – On the welcome/main page could it be possible to reduce the size of each side left and right to get everything wider.

    I hope that I was clear enough in the description of my issues and wait for your usual great assistance.

    Cheers
    Philippe

    #97160

    ricardpriet
    Theme Author

    Hi Philippe,

    great, to have only featured image bigger and centeres, then add this CSS instead:

    @media (min-width: 1350px) {
    .single .entry-thumbnail {
        width: calc(100vw - 30px);
        margin-right: calc((100vw - 1170px) / -2);
        margin-left: calc((100vw - 1170px) / -2);
    }
    .single .entry-thumbnail img {
        max-width: 1800px;
        width: 100%;
    }
    .single .hentry {
        overflow: visible;
    }
    }

    and to have the home page with more width:

    @media (min-width: 1200px) {
    body.home .container {
        width: 1470px;
    }
    }

    Change the 1470px for you desired max width (remember having this number bellow 1800px!)

    Let me know.
    Thank you again!
    Ricardo

    #97198

    Thank you very much Ricardo, it looks exactly as I want.
    Cheers
    Philippe

    #97205

    ricardpriet
    Theme Author

    Nice to hear that!

    Have a nice week :)
    Ricardo.

The topic ‘Bigger pictures’ is closed to new replies.