Tablet and Mobile heading issue

[Joni]

Hi,

I have a very simple setup and everything else works fine, but for some reason I’m having trouble getting the page to display correctly in mobile and tablet.

On the top of front page theres a row with window height image background. It shows correctly on desktop, but on mobile and tablet it cuts out strangely.

I’ve attached screenshots to illustrate the issue.

Any ideas how to fix?

Thanks!

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

Can you try this code to fix it.

@media only screen and (max-width: 767px){
.home .spb-section, .home .spb-promo-wrap, .home .spb_swift-slider, .home .spb_image, .home .spb-row-container,.home .spb-row-container > .spb_content_element {
    padding-top: 0px!important;
}
}

Let us know if it worked.

-Rui

[Joni]

Hi Rui,

Thanks again. It did change the visibility a bit, but it looks like the header is overlapping the first row.
I tried to change the page header to standard from the Naked, but no change there.

-Joni

[David Martin – Support]

Hi Joni,

Have you fixed this or changed settings, this is what I see:

Please let us know.

Thanks.

[Joni]

Hi,

I did make the change, but it shows randomly.
Generally, in landscape mode it shows correctly on tablet, but on vertical mode on all devices (tablet & mobile) the header overlaps the first row (with the gray X as a placeholder)

Thanks.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Can you please test this CSS:

@media only screen and (max-width: 767px) {
	.spb_parallax_asset.parallax-window-height[data-v-center="true"] > .spb_content_element {
	    top: 50%!important;
	}
	.spb_parallax_asset.parallax-window-height {
	    min-height: 640px;
	}
}

Thanks.

[Joni]

Hi,

After injecting the new CSS, the row is now displayed as window height, but text element still stays under the header.

Attached file “Before” shows how it’s not displayed after the new CSS. The file”After” shows what I’m going after. Simply a row background image with vertically centered text block.

Any ideas?

Thanks!

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Sure, this should sort that:

@media only screen and (max-width: 767px) {
.spb_parallax_asset.parallax-window-height[data-v-center="true"] > .spb_content_wrapper, 
.spb_parallax_asset.parallax-window-height[data-v-center="true"] > .spb_content_element {
    top: 50%!important;
    position: absolute;
    margin-top: 0!important;
}
}

Thanks.

[Joni]

Hello again,

Thanks. The latest CSS seemed to fix the (portrait) tablet view, but phone versions still manifest like before.

Thanks!

[David Martin – Support]

Looks like you have the CSS commented out? If you add the CSS back, the small screen looks like so:

Thanks

[Joni]

Hi,

Thanks again. I had commented the previous lines of CSS as I thought th enew one would replace the old ones. Now that I’m using all of it, it shows okay in iPhone6 and up, but smaller phones it scales/anchors strangely. (see attachments)

Is there some other way to do this in the theme so that it shows “right” on mobile? I mean I just want the landing page to have a full frame image with centered text on top of it.

-Joni

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

What testing tool is that you are using? Let me know and I’ll investigate those sizes further.

Thanks.

[Joni]

Hi,

I’m using Safari’s “Responsive Design Mode” and individual devices (iPhone & iPad)

-Joni

[David Martin – Support]

How is this looking for you now:

Thanks.

[Joni]

Hi,

That looks about right. Still not centering the row background image for some reason, but after updating SFW and the theme, looks the same as your file. I’ll take it from here, thanks again!

-Joni