Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #652359

    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!

    #652543

    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

    #652682

    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!

    #652832

    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!

    #654021

    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/ (Purchase code hidden if logged out) -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

    #1115919

    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

    #1116257

    Hi GaWi,

    Could you please attach some screenshots of the issue?

    Which elements exactly are you referring to?

    Best regards,
    Victoria

    #1116261

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

    Greets Gabi

    #1116428

    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

    #1116434

    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 2 months, 1 week ago by  GaWi.
    #1116854

    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/# (Purchase code hidden if logged out) -support

    Best regards,
    Ismael

    #1116976

    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

    #1117003

    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

    #1117006

    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

    #1117652

    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

    #1117864

    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

    #1118638

    Hi,

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

    Best regards,
    Ismael

Viewing 17 posts - 1 through 17 (of 17 total)

You must be logged in to reply to this topic.