Mobile Site Functionality

Support
#1

Hello,

Please take a moment to access homeandhealthy.net from a mobile device. Unfortunately there are some issues adapting to mobile which should not be occurring. I have included images which relate to the number list below.

  1. “Like a Concierge Service for Seniors” image shrinking in size. Image: https://prnt.sc/hhhnst
  2. Background image floats down when menu is accessed, leaving white banner at top. Image: https://prnt.sc/hhhnxx
  3. Our story page “Reasons to Trust Us” section becoming narrow… should be wider. Image: https://prnt.sc/hhho4m
  4. Our story page “Mission” section becoming narrow… should be wider too. Image: https://prnt.sc/hhhobm
  5. Service Packages page list behaving very strangely. Image: https://prnt.sc/hhhojo

Thank you!
Josh

#2

Hi Josh,

Thank you for writing in! 1) That is a background-image right? Please read my reply here

  1. I see that you have a topbar in the header but no content, if you’re not planning to use the topbar you can deactivate it under Theme Options > Header > Topbar

  2. & 4) That is because of the huge padding you applied on that section, we can reset that on narrow screen devices (767px and below) with the custom CSS below.

Please add this to Theme Options > CSS, and then apply the CLASS reset-padding on that section

/*reset padding on mobile*/
@media (max-width: 767px) {
	.reset-padding {
		padding-left: 5px !important;
		padding-right: 5px !important; 
	}
}
  1. That is a bug that has been already addressed. Please update you X Theme and Cornerstone to the latest version (refer here for the latest compatible versions).

Updating Your Themes and Plugins

Remember to clear all caches (plugin, server-side, CDN, and browser’s cache) after updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Hope it helps,
Cheers!

#3

Hello,

Apologies for the long delay - I was working out some hosting issues.

  1. That is not a background image. It is an image element placed on the page. Please advise, as the shrinking makes it too hard to read on mobile.

  2. Not the solution I was looking for, but okay. :slight_smile:

3 and 4. Your code doesn’t seem to be working. :frowning:

Thanks,
J

#4

Hello There,

Thanks for updating in!

1.) The image shrinks because it has to. It is to accommodate its width since there is a left and right padding applied to the container. We can make use the code given by @Friech and reference the section id. Please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

/*reset padding on mobile*/
@media (max-width: 767px) {
	#x-section-1 .x-container.marginless-columns {
		padding-left: 5px !important;
		padding-right: 5px !important; 
        width: 95%;
	}

    #x-section-1 .x-container.marginless-columns img {
        width: 90% !important;
    }
}

2.) I noticed that you have enabled the Top and nothing is displaying on it. Are you using the Topbar? Please disable it in X > Launch > Options > Headers > Miscellaneous so that there will be no space above your header.

3.) and 4.) The code given by @Friech is not working because you are meant to add a custom class for each respective rows that is experiencing the issue. Please edit the page back in Cornerstone and click on each rows. In the row settings, go to “Customize” and insert reset-padding in the class field so that the given code will work for you.

Please let us know how it goes.

#5

Good afternoon,

  1. I added your new code but it doesn’t appear to be working: https://prnt.sc/hkh87g

  2. The only thing displaying on the topbar is the background image you find below. I could remove the topbar, but the you wouldn’t see the top of the image peeking out. That is why that solution does not really work.

  3. and 4. I added the class, but it doesn’t appear to be making a difference on mobile.

Now there is a new issue, which is the menu on iPad: https://prnt.sc/hkh852

Thanks for your help - really trying to get this right.
J

#6

Hello There,

1.) The code should have been added in the Cornerstone’s page custom css. There could be some other css that affects this. Please provide us login so we can fix this for you.

2.) I updated the code in #1 to remove the white space.

@media (max-width: 767px) {
	#x-section-1 .x-container.marginless-columns {
		padding-left: 5px !important;
		padding-right: 5px !important; 
        width: 95%;
	}

    #x-section-1 .x-container.marginless-columns img {
        width: 90% !important;
    }

    .x-topbar {
    	display: none;
    }
}

3.) and 4.) Did you removed the class already? Please add it back so that we can check it.

5.) In your ipad, because there is not enough space to display the menu items, it goes to the second row. To resolve this, you can make use of this code:

@media(max-width:1100px) and (min-width:980px){
    .x-navbar .x-container {
        width: 98%;
    }
}

Please let us know how it goes.

#7

Thanks for your reply.

  1. Username and password in secure note.
  2. Code doesn’t appear to be working.
    3 and 4. The class “reset-padding” is in the row. I didn’t remove it.
  3. Works like a charm!

Please let me know if you need anything else from me.
J

#8

Hi there,

Thanks for the details.

The code did not work because you have added the class to the row settings when it’s supposed to be added to the class field of the section as mentioned in @friech 's first response.

The CSS code is also not yet added in the custom CSS so kindly make sure to add this code:

Hope this helps.

#9

Thank you for your thorough response! It is extremely appreciated and I am very pleased - everything appears to be in proper workign order. Your support team is incredible.

J

#10

You’re welcome :slight_smile:

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.