[Support request] Full width image?

Home Forums Support [Support request] Full width image?

Home Forums Support Full width image?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #658027
    Viktor

    Is there a way to insert image at a full width of the inside-article container, overwriting margins?

    See the screenshot

    https://cl.ly/2b6658af9e67

    Thanks

    GP Premium 1.7.2
    #658065
    David
    Staff
    Customer Support

    Hi there,

    you can try this by adding a full size image in a wrapper with this class:

    .wide-image-wrapper {
        margin-left: -40px; /* change PX to match container padding */
        width: calc(100% + 80px); /* change to 2x container padding */
    }

    You could apply it directly to the img itself but WP has a habit of wrapping it in a P tag, which messes things up.

    #659020
    Viktor

    David,

    thanks, it works for me with small modifications:

    .wide-image-wrapper {
    max-width:calc(100% + 124px);
    margin-left: -62px;
    }

    https://www.staging.phototraces.com/deconstructing-photo/hiking-in-kodachrome-utah/

    Now, I am facing another issue. In the mobile view, the image is 124px wider than a width of the device.

    Any ideas?

    #659030
    David
    Staff
    Customer Support

    Thats great, try some media queries to adjust for mobile, something like so:

    /* Desktop */
    @media (min-width: 769px) {
        .wide-image-wrapper {
            max-width: calc(100% + 124px);
            margin-left: -62px;
        }    
    }
    /* Mobile */
    @media (max-width: 768px) {
        .wide-image-wrapper {
            max-width: calc(100% + 40px);
            margin-left: -20px;
        }    
    }
    #659033
    Viktor

    Dave,

    I am still new to GP, so I probably have a dumb question.

    When I customize CSS globally, which customization section do I use? Simple Custome CSS, Simple CSS or Additional CSS?

    Thanks

    #659042
    David
    Staff
    Customer Support

    Oh my thats a lot ๐Ÿ™‚
    I would keep them all in one place.
    Additional CSS is added by WP Core so.
    Simple CSS (by Tom) is super and my choice if i am not using a Child Theme.

    The Simple Custom CSS i haven’t used but that plugin doesn’t do as much as Simple CSS so i would probably remove that.

    #659100
    Viktor

    Thanks, guys,

    With your help, I managed to switch from Genesis to GP without too much hassle.

    https://www.phototraces.com

    and this is the speed I got at a first try without any optimization:

    https://cl.ly/6d9a07057ea7

    simply WOW

    #659119
    David
    Staff
    Customer Support

    Its always great to see what people are building with on GP. And thats a great looking site ๐Ÿ™‚
    haha yes, it is phenomenal how fast you can build a site and how fast it is.

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