Home-Register Demo Page is not Responsive

This topic has 10 replies, 3 voices, and was last updated 8 years by Radu.

Author
May 23, 2017 at 08:29 #162384

rinda
Participant

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!

May 23, 2017 at 22:00 #162492

Laura
Moderator

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

May 24, 2017 at 07:24 #162522

rinda
Participant

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?

May 26, 2017 at 13:28 #162742

Laura
Moderator

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

May 31, 2017 at 19:59 #163142

rinda
Participant

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. 🙁

June 2, 2017 at 14:07 #163288

Laura
Moderator

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

June 5, 2017 at 18:54 #163442

Radu
Moderator

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

June 5, 2017 at 19:18 #163450

rinda
Participant

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?
June 7, 2017 at 16:56 #163648

Radu
Moderator
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
June 11, 2017 at 00:40 #163939

rinda
Participant

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.
June 13, 2017 at 17:01 #164173

Radu
Moderator
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