Full width stretched

Hi

Full Width Stretched Padding will add padding to the sides of the row, Full Width Stretched won’t. Both have 100% width content and backgrounds.

Cell vertical alignment stretch is using flexbox. Stretch will:

stretch to fill the container (still respect min-width/max-width)

Ref: https://css-tricks.com/almanac/properties/a/align-items/

Please, send a link to the page so we can take a look at what’s going on. For questions like this, it’s rare that we’ll be able to assist fully without taking a look at the challenge directly, thanks ??

@siteoriginsupport Thanks, that’s what I thought.

Here’s the link – https://www.bylauraiancu.com – it’s for the image next to ‘I’m Laura’. I have this row set to ‘Full Width Stretched’ and the cell vertical alignment to ‘stretch’. However, the image doesn’t get all the way to the right and it’s aligned top.

Your help is appreciated!

Laura

• This reply was modified 6 years, 9 months ago by lauratraveler.

Thanks for the link ?? All seems to be ok on my end, at least in MacOS Chrome, Firefox, and Safari. Did you perhaps make progress since last posting?

@siteoriginsupport Nope, I didn’t make any progress. The extra space is still there. I’m attaching a photo

Thanks.

The gaps shown aren’t present in MacOS Chrome, Firefox or Safari. Which browser are you testing with?

@siteoriginsupport I’m testing from MacOS Chrome and Safari from a 13″ screen and the gaps are present in both browsers. Maybe your screen is bigger or smaller and that’s why you don’t see the gaps?

Thanks.

At Settings > Page Builder > Layout > Use Legacy Layout Engine, what setting is selected? Ideally, it would be on Detect older browsers.

@siteoriginsupport Yup, that’s what I have, ‘Detect older browsers’. My browser is up to date btw.

I’ve also tested this from an iPad in landscape view and since the screen is smaller, the gap under the photo is even bigger.

We can’t see front-flex.css which should be outputting so something is missing. Please, try clearing Autoptimize and temporarily deactivating it. Thanks.

pro-tip; you can disable Autoptimize on a per-request basis by adding ?ao_noptimize=1 to the URL.

if the problem is not there at that point, some autoptimize (re-)configuration might be needed to fix this. there are troubleshooting tips and info on how to exclude in the AO FAQ.

hope this helps debugging,
frank (ao dev)

Super, thanks for the tip, appreciate it ??

@siteoriginsupport I cleared Autoptimize and purged the cache and added the ?ao_noptimize=1 to the URL. But it’s still the same, nothing changes, the gap is still there.

Thanks for trying. I’ll ask Alex to take a look for us.

Hi laura,

Can you please try adding the following CSS to either WP Admin > Appearance > Custom CSS or WP Admin > Appearance > Customize, Additional CSS or your child theme:

.panel-grid-cell:after, .panel-row-style:after {
	content: none !important;
}

How does that look?

If that doesn’t help, I see a floating button above the image. Can you please temporarily disable all addons and clear your browser cache to see if that helps?

• This reply was modified 6 years, 8 months ago by alexgso. Reason: Updated reply with possible solution

That fixed the gap at the right of the image. Thanks, @alexgso. However, the image still doesn’t stretch vertically. What settings should I use for that? I tryed both adding the image inside a widget and setting it as a background image for the widget. Neither works.