Docs

[elise83]

Hi,
As you can notice on the series of screenshots that a lot of stuff is messed up.

Screenshot 1: Backgroung image is cut off and headline too big + cut off
Screenshot 2: Backgroung image is cut off
Screenshot 3: Backgroung image is cut off and headline too big
Screenshot 4: Backgroung image is cut off and headline too big

[elise83]

Screenshot 5: Backgroung image is cut off and headline too big
Screenshot 6: Backgroung image is cut off
Screenshot 7: Countries not aligned
Screenshot 8: Backgroung image is cut off

[elise83]

Screenshot 9: Backgroung image is cut off and Text is a complete mess
Screenshot 10: Backgroung image is cut off

If you can please help me with all this, thank you in advance please check on your phone if everything is correct thank you so much.

[Joao]

Hi There,

To make sure backgrounds are not cut, you can add:

background-size: contain; to the style box of each section.

On your first section your Style would be : height: 100vh; background-size: contain;

To make your headline responsives please follow this reply :

https://community.theme.co/forums/topic/responsive-text-how-to/#post-388754

Hope it helps

Joao

[elise83]

Hi there,

I added what you said regarding the backgrounds that are cut, but still a mess on Mobile phone. Some white sections appear.Please recommend any other easy fast way.

Thank you

[Joao]

Hi There,

Where exactly these white sections appear? I could not see any.

Joao

[elise83]

on top of the backgrounds if you check it out on an iphone you will see what i mean

[Jade]

HI there,

I have tried to check your site on an iPhone and I can’t seem to find the white sections you mentioned.

Kindly send us a screenshot so that we’ll have a better idea of the issue.

[elise83]

Hi there,

Actually when i follow what you said in previous reply :

” To make sure backgrounds are not cut, you can add:

background-size: contain; to the style box of each section.

On your first section your Style would be : height: 100vh; background-size: contain; ”

When i add the code above, white sections start appearing on top, please try it to see

[elise83]

Still the background is cut with the code above and i want it to look exactly the same as in desktop. If you see your screenshot you will notice that the box displayed on desktop version is now cut on mobile version and that´s exactly what i wanna fix. Thanks to help fixing this issue

[Rad]

Hi there,

Mobile and desktop are different devices, and they can’t be the same unless the screen size is the same. What you could do is use different section for each device and have background applicable for each device. You may use the section’s HIDE BASED ON SCREEN WIDTH option each section.

Example,

1. Add Section-1 and hide it on mobile, then apply a landscape background image (images width wide width and shorter height)
2. Add Section-2 and hide it on desktop, then apply a portrait background image (images with narrow width and longer height) and make sure the parallax is disabled.

Thanks!

[elise83]

Great thanks. Need help on the phone number on contact section: On desktop the numbers are in white color but on iphone it’s black. I don’t understand why ? Please help
Thanks

[Rad]

Hi there,

Please add this code to your child theme’s functions.php

add_action('wp_head', 'remove_ios_phone_formatting');

function remove_ios_phone_formatting() {
echo '<meta name="format-detection" content="telephone=no">';
}

Hope this helps.

[elise83]

Hi there,

Can you please let me know where is the child theme´s functions.php ?????

Thanks

[Paul R]

Hi,

You need to login to your FTP and navigate to wp-content/themes/x-child/functions.php

or you can also add it from the dashboard.

See screenshot – https://www.screencast.com/t/i5zPnChEm

[Author]

Posts