Various issues

Support
#1

For the mobile version of this page only: https://goalsarecool.com/join-free/
 
1.) How do I get the mobile buttons in the top header to appear the same as they do on the desktop?
 
2.) How do I get rid of the white gaps on mobile?
 
3.) On mobile, how do i prevent the text from expanding outside of it’s container?
 
Thanks!
 
Blake

#2

Hi Blake,

Thank you for writing in, 1) they already appeared as a button, the same as the desktop (https://prnt.sc/fqbzwl), please clarify.

  1. You have some Gap elements between those sections, right? Please hide those gaps on small and extra small screen (https://prnt.sc/fqc18e)

  2. Please utilize the Responsive Text Settings. To do that, please assign a CLASS to your Custom Headlines (e.g. responsive-header), then use that CLASS as the selector on your Responsive Text Settings (.responsive-header yes you need to prepend it with period). Play with the Compression, Min-size, Max-size until your get the desired look (https://prnt.sc/fqcgij).

Hope it helps,
Cheers!

#3

Thanks @friech

1.) Here is what I see when I look at the buttons on an iPhone 5 https://prnt.sc/fqdnko

2.) I hid the gap elements on mobile, but how do i get some space on mobile now?

3.) That worked, but it doesn’t look great on mobile. How can I reduce the left and right column padding on mobile?

Thanks!

Blake

#4

Hello Blake,

1.) How do I get the mobile buttons in the top header to appear the same as they do on the desktop?

  • You probably can’t that is because there is not space for the two buttons. The button text made it impossible to have the buttons of the same size.

2.) You can add another gap element with a different gap settings and make sure that this gap element is only visible for mobile screens.

3.) To minimize the gap in smaller screens, please edit your page in Cornerstone and insert the following custom css in the side panel

@media(max-width: 979px){
    .x-section .x-container.marginless-columns .x-column[class*="x-"] {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

Please let us know if this works out for you.

#5

Thanks @ruenel!

1 - Then how do i make the buttons fit on mobile?

2 - That did not work. It just made the white gap bigger on mobile.

3 - This worked. Thanks!

Blake

#6

Hi Blake,

1.) Let’s use custom media query to adjust button size font size so it will fit on mobile:
@media (max-width:480px){ a.hm3.x-anchor.x-anchor-toggle, a.hm5.x-anchor.x-anchor-toggle { font-size: 0.8em; } }

2.) I don’t see white gaps anymore when I check on mobile. Just normal gaps which is not hidden based on screen size.

1 Like
#7

The buttons appear to be fixed on mobile now. I put the code in the header CSS so it won’t impact other buttons on mobile… correct?

Also, the white gaps are removed because i removed the gap element… it didn’t work. On mobile, how do i get the top padding for the top 2 blue boxes to match the others?

Thanks!

Blake

#8

Hey,

You can try the following code:

@media (max-width: 480px) {
   #x-section-1 .x-column {
    padding-top: 95px !important;
 }
}
1 Like
#9

That worked… thank you!

#10

Glad to hear that. :slight_smile:

#11

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