[Support request] Full width image?

[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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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?

[David]

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;
    }    
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts