Support » Theme: Perfetta » full width image on site

  • Resolved mfauster

    (@mfauster)


    Hi,
    i am wondering if (and how) it is possible to have the images on a site full width (same as the featured image in a post)

    thank you very much!
    Marc

Viewing 12 replies - 1 through 12 (of 12 total)
  • Theme Author GavickPro

    (@gavickpro)

    Hello,

    In this case you have to consider use of negative margins for a specific images – I suggest to use a special custom CSS class which will be added to selected images i.e.:

    .wide-img {
       margin: 0 -20px;
       min-width: 100%;
       width: auto;
    }

    Hi GarvickPro,

    thanks a lot – have added the class as per exaple (changed -20px to -65px). It is now starting correctly directly on the left side but the image (width 1100px) still gets automatically resized to width 970px so there is still the white background of the textarea on the right side…
    any ideas on that?

    best regards,

    mfauster

    edit: changed min-width: 100%; to min-width: 1100px; – now it is showing the image correctly on desktop but is not responsive for mobile devices… :\

    Theme Author GavickPro

    (@gavickpro)

    Please provide an URL to your website with this issue.

    Theme Author GavickPro

    (@gavickpro)

    Please change your wide-img class to:

    .wide-img {
      margin: 0 -65px;
      max-width: none;
    }

    it should works.

    Hi GavickPro,

    changed the class accordingly – nothing changed :\
    Any other idea?
    regards, Marc

    Theme Author GavickPro

    (@gavickpro)

    Please try to apply the wide-img class to the <a> tag around your image. Then please do following:

    .wide-img {
       display: block;
       margin: 0 -65px;
       width: auto;
    }
    .wide-img img {
       display: block;
       max-width: 100%;
       width: 100%;
    }

    thank you – it is now working correctly on PC web browser but I still have displaying issues on the iphon (the picture does not resize to the white box but to full width of the screen)

    Theme Author GavickPro

    (@gavickpro)

    It is caused by fact that tablet/mobile version of the theme have smaller margins – please create in media queries the .wide-img selector with smaller negative left/right margins.

    okay, thank you.
    I am not familiar with media queries. If you could help me it would be great, otherwise i will leave it as it is. 🙂

    thank you anyways!

    Theme Author GavickPro

    (@gavickpro)

    After:

    @media (max-width: 1069px) {

    in the style.css file, please add:

    .wide-img {
       	margin: 0 -35px;
    }

    As I see it will solve all your issues.

    it works GREAT!

    thank you very much for this PERFECT support.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘full width image on site’ is closed to new replies.