Home-Register Demo Page is not Responsive

[rinda]

Hi – can you help make the Home-Register Demo Page responsive?  I’m using it as my static front page to my site and when I view it on different devices, it is not responsive.  Please help, thanks!

[Laura]

Hello, please check attached image, it is responsive for me 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[rinda]

Hi – Did you take a look at the top of the page? I see the same thing in your screenshot but if you scroll up, the words are cut off. And the background image when viewed on a mobile device only zooms in on one part of the image and doesn’t shrink the image to fit the device settings…is this behavior normal for responsiveness?

[Laura]

Hello, i see it fine, it may be an issue related to your mobile browser, have you tried with another device?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[rinda]

I have tried it on my iphone6 and a few other friend’s iphones as well. Even when I try it on google chrome browsers to test different devices, the image doesn’t shrink either. 🙁

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Radu]

Hi,

Ok on me
Did you have fixed ?

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[rinda]

Hi – not fixed yet. The issue I’m still having is with the background. It’s not shrinking and showing the baby – only the foot. 🙁 . Is there a recommended image size for background images?

[Radu]

Hi,
I see the only way to can have original image ratio it’s to set via CSS background-size contain, in this way the image will be wrapped into the view port.

COPY CODE

@media(max-width:991px){
    article#post-9468 section.container-wrap.main-color {
    background-size: contain !important;
    background-position: center center !important;
}
}

The CSS will be added to wp-admin -> theme options -> general settings -> quick CSS
NOTE : Child theme needs to be installed and activated.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[rinda]

Thank you. This works, but can you also tell me if focusing on a specific section of the image is an option too for mobile viewing? Before adding the CSS code you provided, it focused on the baby’s foot in the image. If I want to focus on the baby’s face instead of the foot, is that possible?

Thanks.

[Radu]

Hi,

That CSS it’s applied only for mobile. And it not affects the position of the image on desktop just under 991px, under this resolution the image position it’s controlled by

COPY CODE

background-position: center center !important;

You can set top,right,bottom,left

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Author]

Posts