Tagged: , , , , ,

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • June 22, 2016 at 8:33 pm #652359
    brandonwu

    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!

    June 23, 2016 at 8:40 am #652543
    Rikard

    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,
    Rikard

    June 23, 2016 at 7:08 pm #652682
    brandonwu

    I’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!

    June 24, 2016 at 5:43 am #652832
    brandonwu

    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!

    June 28, 2016 at 2:51 am #654021
    Ismael

    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,
    Ismael

    July 4, 2019 at 9:34 pm #1115919
    GaWi

    Hello,
    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 Gabi

    July 6, 2019 at 12:36 pm #1116257
    Victoria

    Hi GaWi,

    Could you please attach some screenshots of the issue?

    Which elements exactly are you referring to?

    Best regards,
    Victoria

    July 6, 2019 at 12:47 pm #1116261
    GaWi

    Hi Victoria,
    this is the link of one portfolio (the same in all other portfolios)

    Fredenbeck, Kastanienweg 18

    Greets Gabi

    July 7, 2019 at 11:39 am #1116428
    Victoria

    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,
    Victoria

    July 7, 2019 at 12:35 pm #1116434
    GaWi

    Hi Victoria,
    great solution – it looks fine.
    Thanx for phantastic suport – like allways. And how do i use it for the other portfolios? Same CSS-code with just the change in the url?
    Greets Gabi

    • This reply was modified 5 years, 4 months ago by GaWi.
    July 9, 2019 at 3:32 am #1116854
    Ismael

    Hi,

    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,
    Ismael

    July 9, 2019 at 9:36 am #1116976
    GaWi

    Hi 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 Gabi

    July 9, 2019 at 10:41 am #1117003
    Ismael

    Hi,

    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,
    Ismael

    July 9, 2019 at 11:04 am #1117006
    GaWi

    Hi 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 Gabi

    July 11, 2019 at 4:01 am #1117652
    Ismael

    Hi,

    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_cell

    Best regards,
    Ismael

    July 11, 2019 at 6:38 pm #1117864
    GaWi

    Hi 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

    July 15, 2019 at 1:44 am #1118638
    Ismael

    Hi,

    Odd. That should have worked. Let us know if you need anything else. Thank you for your patience.

    Best regards,
    Ismael

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