Full height background parallax image on mobile view

Beaver Builder
1

Hi,

I have a question regarding full width and full height background parallax images on mobile view.

If I want to change the width of the background image on mobile view I use following CSS to my custom Media Queries: (note that the class “intro-section” is a custom class for the row)

.fl-row-content-wrap .intro-section {
background-size:500px !important;
}

But when I view it on mobile there is a gap at the top and at the bottom of the row where the background image are showed.

I can se that there is a global css style where the min-height is set to 100vh:

.fl-row-full-height .fl-row-content-wrap {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
min-height: 100vh;
}

All in all how do I change the height i my Media Queries so I don’t get the gap in the top and the bottom when I change the width of the background-image?

2

Hey Morten,

Do you mind sharing the URL of the site in question so we can take a look?

Ben

3

[Content Hidden]

4

Hey Morten,

The min-height is set to 100vh to allow for the full height effect. It adjusts the wrapper so it fills 100% of the viewport height. The problem is with your background image’s aspect ratio, it’s not suitable for portrait view, only landscape. I would suggest creating a duplicate of those rows and setting them up for mobile view. You can set a row to show only on specific devices under the Advanced tab.

Or, since you know media query, you can change the background image on mobile view so it’s suitable for a portrait device. Feel free to check the KB article we have below for guidance. :slight_smile:
http://forum.wpbeaverbuilder.com/knowledge-base/change-row-background-image-on-mobile-view/

Ben

5

Hi Ben,

When you say “creating a duplicate of those rows and setting them up for mobile view” what do you exactly mean? :slight_smile:

Are there any way to prevent full height in mobile view by using Media Queries ?

6

Hi again,

I see what you mean about duplicate rows now :slight_smile: I do not know if it is a good idea SEO wise.

I have tried the Media Query way from the KB article. But it doesn’t seem to have any effect.

My CSS: (intro-section is my custom class)

.fl-content .intro-section .fl-row-content-wrap {
background-size:500px !important;
min-height: 50vh !important;
}

7

Hey Morten,

To remove the full height effect, simply set min-height to its default value of 0 on your mobile media query.

Ben

8

Hey Ben,

Thanks for advise and a great product!

9

No worries at all! And thanks for the kind words! :slight_smile: Enjoy! :slight_smile:

Ben