Responsive background images

Hey!

Try to replace this code I gave you:

@media only screen and (max-width:767px) {
  #top #hello .av_one_half {
    display: flex;
    width: 100%;
  }
}

And replace it with:

@media only screen and (max-width:1024px) and (min-width:768px) {
  #top #hello .av_one_half {
    display: flex;
    width: 100%;
    padding: 50px 100px 20px !important;
  }

  #top #hello .av_one_half.avia-builder-el-last {
    padding-bottom: 50px !important;
  }
}

As for word breaks please replace this:

@media only screen and (max-width:767px) {
  * {
    word-break: break-all;
  }
}

To:

@media only screen and (max-width:767px) {
  * {
    word-break: break-word;
  }
}

This should break per word, however what I saw in your site was a long text that was overlapping, the workaround we can do with it is adjust font size.

Regards,
Nikko

Hi!

Looking at the screenshot I realized you need it on other sections as well not those sections that has id set to hello, to do this I think you need to enable Custom CSS Classes, here is how to enable and use it: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

Next, put custom-gridrow in Custom CSS Classes textfield (add this to all gridrows that has the same layout including the one that has id set to hello). In Quick CSS, just all #hello to .custom-gridrow, replace this code that I gave:

@media only screen and (max-width:1024px) and (min-width:768px) {
  #top #hello .av_one_half {
    display: flex;
    width: 100%;
    padding: 50px 100px 20px !important;
  }

  #top #hello .av_one_half.avia-builder-el-last {
    padding-bottom: 50px !important;
  }
}

And replace it to:

@media only screen and (max-width:1024px) and (min-width:768px) {
  #top .custom-gridrow .av_one_half {
    display: flex;
    width: 100%;
    padding: 50px 100px 20px !important;
  }

  #top .custom-gridrow .av_one_half.avia-builder-el-last {
    padding-bottom: 50px !important;
  }

  #top .custom-gridrow .av_one_half.avia-full-stretch {
    min-height: 500px;
  }
}

I have added the 3rd block for those fullwidth images, so it doesn’t look too low, just change the value as you see fit. Hope this helps :)

Cheers!
Nikko

Hi Dirk,

Glad we could help :) Have a great day ahead :)

Cheers!
Nikko

Hi,

some custom code you’re using must cause this issue. Please remove any custom code you’re using to find out which one is causing it and let us know about your results here.

Login does not work anymore. Can you check please?

Best regards,
Andy

Hi,

again: remove any custom code you’re using to check if/which one is causing this issue and let us know about your results here. Deactivate any plugins while testing to check if one is causing a conflict.

If that does not help then there might be some corrupted files, so please delete all theme files completely via FTP, before installing a fresh copy from your themeforest account. Here is a short tutorial on how to install the theme via FTP, in case you are not sure how that works:

Best regards,
Andy

Hi,

I don’t understand what you mean. You say they appear when removing this code, but at the same time they’re still missing on mobile? can you explain further and provide us some screenshots of the issue when you remove your custom codes?

Best regards,
Andy

Hi,

I checked your page in question and you did not follow Ismael instructions. You’re using only one grid row for desktop, but you need to duplicate it for mobile. Please check again and follow the instructions: http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/

Best regards,
Andy

Hi,

if it’s working then you already got the answer, don’t you?

Of course there are always different solutions to a problem.

Let us know in a new ticket if you’ve some more questions about our themes.

Best regards,
Andy

Hi Dirk,

It should be showing up properly now. The reason the 2 images were not showing is because the cell where those 2 missing images doesn’t have any padding while the other 7 images have 100px padding on all sides. I have edited the 2 cells on that page.

Regards,
Nikko

Hi,

Glad we could help!

To know more about enfold features please check – http://kriesi.at/documentation/enfold/
We really appreciate it if you review our theme on themeforest https://themeforest.net/downloads

Thank you for using Enfold :)

Best regards,
Vinay