[Resolved] Hero image elements don't bring in the Alt tag

[Leo]

Might be good to check with the plugin support to see if there is a good way to do this.

Generally that’s the best practice whcih is why the page builder container option exists in GP 🙂

[Carrie]

Good morning, Theo! So one of the reasons I love your elements feature so much is that it can serve up different image sizes on mobile. It really helps with design.

Since we switched to using featured images, the alt tags are there, but the images are too small on mobile. What looks great on desktop does not look good at all on a phone. The height is too narrow to present well.

Is there a way to serve up a different featured image on mobile?

[Leo]

You can use the built-in hide-on classes and insert two images in the page hero content:
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

The last example is what you are looking for.

[Carrie]

You had me stop using the page hero, since it didn’t resize for larger width monitors, and had that white space underneath the image that we couldn’t seem to get rid of – so I changed all pages to featured images, as you suggested.

Is there a solution for this on featured images?

[Leo]

Sorry I forgot about that – thanks for the reminder 🙂

Not possible using the default featured image option unfortunately as it’s already responsive by default.

we would need to use the page hero option instead. Should be able to solve the white space at the bottom issue.

[Carrie]

Okay! Thanks, Leo. What do you need from me to help solve that white space issue?

I did confirm that the content container in WP Bakery has the top padding set to zero, the image itself does not have white space at the bottom of the image, and the “page builder container” is set to contained. I also have this in the CSS for the page:
Element class: .site-content { padding-top: 0 !important; }

Here is a sample of how a sample page looks (with the mobile not set up yet):
https://www.carriemorgan.com/how-my-custom-keyword-research-works/

[Leo]

Try this CSS:

.page-hero .inside-page-hero {
    line-height: 0;
}

[Carrie]

If I change Page Builder Container to default, that gap doubles in size, if that helps identify what is setting the space?

(I prefer to leave it in default, if possible, since setting it to container means I have to manually add in side padding to every container on every page.)

[Carrie]

That works! The whitespace is gone. Great job, Leo!!!!!!!!!!!!! #happydance

For the responsive display code, I didn’t see an example with two URLs, and the code below didn’t work. What am I doing wrong?

<img src=” https://www.carriemorgan.com/wp-content/uploads/how-custom-keyword-research-works-mobile.jpg
” style=”width:100%;” />

[Carrie]

Whoops, let me try that again…

[Carrie]

Arghh… I’ll try it without the closing

[Carrie]

Sorry, can’t get the code in there for you to view. Let me try an image: https://www.carriemorgan.com/wp-content/uploads/GeneratePress-screenshot-5.jpg

[Carrie]

Never mind – I got the double URL code to work! Although there is a size where both images show up? It’s between desktop/tablet.

[Leo]

Choose the image you don’t want to use to show on tablet and add hide-on-tablet class to it.

[Carrie]

Isn’t it already in there if I have this?

div class=”hide-on-mobile”, URL, style width 100%, close div – then the second div class, “hide-on-desktop” “hide-on-tablet”, URL, style width 100%, close div

[Author]

Posts