[ttwmarketingParticipant]

Hey Guys,
a couple of issues with 4professor.com on mobile.

the section background images arens resizing (example- 4professor.com/heating), and the headlines arent centered (example: “heating, cooling, electrical & Plumbing Experts” on the home page.

Please help
Thanks
D

[ttwmarketingParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Thanks for writing in! Please read this posts:

– https://community.theme.co/forums/topic/background-image-on-phone/#post-780991

– https://community.theme.co/forums/topic/background-image-not-responsive-2/?replyto=628487#post-628693

You can place the CSS attribute background-size: contain; or background-size: 100% 100%; directly to the STYLE field of the section, and see which property suits your needs.

If none of this property works well with your background, then we need to do the last method mentioned on that first post.

Those headings are centred please confirm this issue.

Hope it helps, Cheers!

[ttwmarketingParticipant]

it looks fine on desktop. crappy on mobile

[ttwmarketingParticipant]

also, tried all 3- no luck.

PLEASE help.
D

[Rue NelModerator]

Hello There,

please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.h-feature-headline span {
    display: inline-block;
    position: relative;
    padding: 0;
}

To resize the font size on smaller screens so that it will fit the the custom headline area, you can apply the responsive text and manage it in Settings > Responsive Text. To know more about responsive text and how to implement it, please check out our knowledge base here: https://community.theme.co/kb/shortcode-walkthrough-responsive-text/

Hope this helps.

[ttwmarketingParticipant]

beautiful! Thanks.
What about that image size? Any luck? I tried the posts you sent..

[John EzraMember]

Hi there,

Thanks for updating the thread! Would you mind linking us to the pages and sections you are having issues with regarding images. Also please update your theme and Cornerstone to the latest versions.

To check the latest versions, please visit our Changelog

Note: That you may need to delete Cornerstone manually via FTP if the update is not showing up. You can then reinstall it via X Addons > Extensions.

Thanks!

[ttwmarketingParticipant]

http://4professor.com/heating/

the picture of the woman at the top- looks like shit on mobile

[FriechModerator]

Hi There,

The image is landscape oriented, while mobiles are portrait. You need to create a portrait version of your background image and lets switch it when the page is viewed on mobile with the custom CSS below.

@media (max-width:480px){
	.page-id-1067 #x-section-2 {
	    background-image: url('PORTRAIT IMAGE URL HERE') !important;
	}
}

Hope it helps, Cheers!

[ttwmarketingParticipant]

nope, no luck. What am i doing wrong?

[Rue NelModerator]

Hello There,

Please update the very last part of your custom css and use this instead:

@media (max-width: 767px) {
  .x-content-dock {
      display: block !important;
  }
}

.h-feature-headline span {
    display: inline-block;
    position: relative;
    padding: 0;
}

@media (max-width:480px){
  .page-id-1067 #x-section-2 {
    background-image: url (http://4professor.com/wp-content/uploads/2016/03/Woman-Thermostat.jpg) !important;
  }
  
  .page-id-1067 #x-section-2 .x-column.x-sm.x-1-1 {
    padding-top: 30px !important;
  }
}

Again to display properly the custom headline on mobile screens, we highly suggest that you can apply the responsive text and manage it in Settings > Responsive Text. To know more about responsive text and how to implement it, please check out our knowledge base here: https://community.theme.co/kb/shortcode-walkthrough-responsive-text/

Hope this helps.

[ttwmarketingParticipant]

you guys are the greatest!

[NicoModerator]

Happy to hear that.

Feel free to ask us again.

Have a great day! 🙂

[Author]

Posts