Cardinal Mobile Sizing (Page Titles, Tours section headings)

[mjguifoyle]

Hello – Loving the theme, but having trouble with a few items at the Mobile level (Droid Samsung Galaxy S6 Edge) and I’m having trouble getting media calls to work (shown in attached images and described below):

1. Homepage background image. I’d like to get a media call to work that chooses a different sized image, so it’s not as zoomed-in and blurry as what you see now on mobile. When you view the site from a full-size display, you’ll see what I’m talking about..the fan scene needs to be more visible.

2. Page\Blog title font size\background image size goes off-screen vertically. I think it’s more than just text size (note I’ve adjusted fancy heading font size style); I think it’s because the Page Title element has a height hard coded at 300 px as you see it go off screen in the attached image.

Are you able to offer a couple media calls that may do the trick?

Many thanks in advance!

Attachments:

You must be logged in to view attached files.

[mjguifoyle]

Also, I wanted to mention that I noticed during testing that as soon as the homepage executes it’s first media query to adjust the background image of the row that has it configured to show, that row loses parallax functionality when scrolling. Is that supposed to happen? I’d like prallax effect of the homepage to flow all the way through mobile, if possible.

Thanks again-

[mjguifoyle]

Another update –

Item #2 above is resolved for text heading size issues.

For #1, I’ve also been able to hack away using media queries and understand that the background image was looking funky at smaller sizes because original media queries were changing the background-attachment:fixed to :scroll.

Understanding you probably decided to disable parallax effect on mobile devices altogether to bypass troubles, I can live with that. What I need is for that homepage background image to stay background-attachment:fixed for all devices, regardless, so the image stays sharp and doesn’t become too blurry for smaller screens.

Are you able to offer a fix that will keep my home background image fixed? It is within a row element class=”home-row”.

Thanks again!

[David Martin – Support]

Hi,

For you homepage background image, this should do it:

@media only screen and (max-width: 767px) {
    .spb-row-container.spb-row-content-width.spb_parallax_asset.sf-parallax.home-row.col-natural {
        background-attachment: fixed!important;
    }
}

Thanks.

[mjguifoyle]

Thanks David – I gave it a shot, but on my Droid the homepage background still scrolls…

Is there somthing in the code that is set to force this ‘scroll’ effect for iphones and droids?…I read that in another forum as folks mentioned maybe parallax doesn’t play nicely enough on those devices. Seems like it should, though.

Interested in your thoughts-
Mathew

[David Martin – Support]

Hi Mathew,

What is the exact device you are using?

That media query should indeed do it, unless you have changed the page builder layout. The CSS was for the class mentioned .home-row.

Thanks,
David.

[mjguifoyle]

I’m using a Samsung Galaxy S6 Edge.

No, I haven’t changed the pagebuilder layout. The controlling row is indeed class “.home-row”

One modification I made is the page hides\displays a different blog element for web vs. mobile (elements are located within a column that have visibility adjusted), but both columns are nexted within the same controlling .home-row, so this shouldn’t matter.

I’m seeing the same effects with your code as I had with mine; it’s as if the background-attachment:fixed!important; command is not computing for a specific device. Can you test with an iphone, or another droid device on your side to see if the bg scrolls for any?

Thanks again for your help.

[mjguifoyle]

I should repeat this again as it seems very important; if you try to simulate the mobile viewing device size by clicking\resizing a full-size browser window, you will see the parallax effect take place a it should. (tested using chrome, other browsers)

However, if you view the same page using my droid device (or iphone that we’ve tested), this home page refuses to perform parallax at those same\similar mobile resolutions.

This finding through testing along with the previous threads I had read about device-specific parallax issues, is what prompted my initial post to this community as the issues seems very odd\unique from my perspective.

Hope this helps

[Swift Ideas – Ed]

Hi @mjguifoyle

Parallax is disabled on mobile devices, mainly because iPhones don’t update the display of the page until after the scroll has finished – so animations/transitions are halted and thus would cause a jump to occur after scroll has finished. This is why Parallax isn’t possible.

– Ed