-
Posts
-
Hey there!
Fantastic theme and support! I’ve been able to find the answers to all of my problems very quickly in the past. I haven’t been able to find any support on this specific issue though so any help would be very appreciated.
For SEO purposes we need to have at least one image on every page, but our SEO plugins and Google are not recognizing the background images that we currently have placed in our Grid Row elements. We were able to solve this problem on Desktop by adding an Image content element to the Grid Row and setting the padding to 0px all the way around, but on mobile there are grey bars that appear above and below the image, rather than stacking the image like the background Grid Row image.
Any idea how to fix this issue with some Quick CSS that will stretch the image for iPad and Mobile to remove the grey bars? Alternatively, is there a way to ensure that Google/SEO Plugins recognize background images?
Thanks so much!
Hey brandonwu,
Could you provide us with a link to the site in question so that we can take a closer look please? Background images won’t treated as “normal” ones because they are not added in the html markup, they are added with CSS only.
Best regards,
RikardI’ve pasted the website link to the private content below. I have re-added the photo the the grid row at the very top of the page so you can have a look at the issue.
Thanks!
Sorry I should probably elaborate on what I mean by mobile. The image stacks on mobile phones properly, but we notice the dead space above and below the photo on iPad!
Hi,
Alternatively, is there a way to ensure that Google/SEO Plugins recognize background images?
I’m sorry but this is not possible. Search engines will not index background images or images added via css. It has to be an actual image added via img tag.
Any idea how to fix this issue with some Quick CSS that will stretch the image for iPad and Mobile to remove the grey bars?
Please turn on the custom css class field so that you can add a custom css class selector to the image. http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
Add something like this in the Quick CSS field:
@media only screen and (min-width: 768px) and (max-width: 1024px) { .custom-image { min-width: 200%; } }The custom css class attribute used is “custom-image”. Note that this will force some parts of the image to overflow outside the container.
Best regards,
IsmaelHello,
i have the same problem. I tried the things mentioned above. But photos in grid row on mobile don´t appear on my iphone. In all my portfolios (8) i have one grid row at the bottom. I would like the photos appearing on mobile.
Any helping tipp?
Greets GabiHi GaWi,
Could you please attach some screenshots of the issue?
Which elements exactly are you referring to?
Best regards,
VictoriaHi Victoria,
this is the link of one portfolio (the same in all other portfolios)Greets Gabi
Hi GaWi,
It is a parallax issue, iPad and iPhone do not work well with position fixed.
Try this just for the page https://bauhaus-schulz.de/portfolio-item/fredenbeck-kastanienweg-18/@media only screen and (max-width: 1024px) { .avia-safari #av-layout-grid-4 .flex_cell.no_margin.avia-builder-el-24 { background: url(https://bauhaus-schulz.de/wp-content/uploads/2019/06/Fredenbeck.jpg) top left no-repeat scroll !important; } }Best regards,
VictoriaHi,
Try to replace the css selector “#av-layout-grid-4 .flex_cell.no_margin.avia-builder-el-24” with the Section ID of the grid element plus a custom css class attribute applied to the cells. First, you have to enable the custom css class field.
// https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support
Best regards,
IsmaelHi Ismael,
don´t understand exactly.
– activeated custom css
– wrote into the grid Section ID : bild_portfolio
– wrote into the css fiel : 4gitter
how does the css code have to look like?@media only screen and (max-width: 1024px) {
.avia-safari #bild_porfolio 4gitter {
background: url(https://bauhaus-schulz.de/wp-content/uploads/2019/06/Fredenbeck.jpg) top left no-repeat scroll !important;
}
}
Greets GabiHi,
Yes, that’s how it should look but you have to prepend a dot before the custom css class name.
.avia-safari #bild_porfolio .4gitter {Best regards,
IsmaelHi Ismael,
sorry, doesn´t work. In the 4th portfolio: Stade Hansequartier. Photo doesn´t appear on mobile.
@media only screen and (max-width: 1024px) {
.avia-safari #bild_porfolio .4gitter {
background: url(https://bauhaus-schulz.de/wp-content/uploads/2019/06/Hansequartiera.jpg) top left no-repeat scroll !important;
}
}
Greets GabiHi,
Thank you for the update.
Did you apply 4gitter as a class attribute of the grid row element? Please use this selector instead.
.avia-safari #bild_porfolio .flex_cellBest regards,
IsmaelHi Ismael,
doesn´t work,
but I see, I have to find an easier way, otherwise the client get crazy when they have to care about new portfolios by themselves.
thanx and greets
Gabi
- You must be logged in to reply to this topic.