Page not responsive on certain cell phone devices

Support
#1

Hi,

The page I’m seeking support for is dallaspersonalshopper.com

The page appears fine on my computer, iPad and iPhone 7+ but when I have viewed it on a smaller iPhone and Samsung cell phone the formatting is off in 2 places 1) The home page, very bottom ‘Get in Touch’ section the email address runs off the page. 2) The contact page, very bottom - same thing with the email address.

Can you please help me to fix this so it looks the same when viewing on any device? I am VERY new to this process so please explain in very simple terms please and thank you!!

#2

Hi,

Try adding word-wrap: break-word; in your email link.

eg.

<a href="mailto:admin@dallaspersonalshopper.com" style="word-wrap: break-word;outline: none;">shawnswanson@dallaspersonalshopper.com </a>

Hope that helps.

#3
1-913-908-1995
shawnswanson@dallaspersonalshopper.com

This is the current text in the space.

Do I just add
style=“word-wrap: break-word;outline: none;”
where I inserted the @@@ symbols?

Sorry, first timer here…

In your eg. you also changed the first mailto: to admin@dallaspersonalshopper.com instead of shawnswanson@dallaspersonalshopper.com. Is there a reason for this or was that a typo?

hoping to see exactly what needs added and or replaced to ensure the email address will fit centered on all cell phone devices.

#4

Hi There,

Sorry for the confusion!

The code should read similar to this.

<a href="mailto:shawnswanson@dallaspersonalshopper.com" style="word-wrap: break-word;outline: none;">shawnswanson@dallaspersonalshopper.com </a>

Hope this clear now!

Thanks

#5

Thank you! Got it!
So now, I entered this code and instead of the text scooting over to fit in the box on a smaller phone device it ends up looking like this…

1-913-908-1995
shawnswanson@dallaspersonalshop
per.com

I was hoping the entire email address would stay as one line. Anything that can be done for that? Ideally, the phone number and email address listed would all be centered under the heading ‘Get In Touch’

Hope this makes sense…

Thank you again!

#6

Hello There,

Thanks for updating in! Please update your code and use this:

<div><a href="tel:1-913-908-1995">1-913-908-1995</a></div>


<div><a href="mailto:shawnswanson@dallaspersonalshopper.com" style="word-wrap: normal;outline: none;">shawnswanson@dallaspersonalshopper.com </a></div>

Hope this helps.

#7

Thank you…I changed it to the code you just sent and it somehow went back to the way it looked before. With this code the .com hangs outside of the grey ‘container’. There is room within this grey box/container for the email address to move to the left to keep it centered and contained within the grey area but ?? It looks fine on my cell phone but on smaller phones it is doing this. I wish I could share a photo…

#8

Hello There,

The email address hangs outside the container when there isn’t enough room to display the whole length of the address. In this case, we can change the font size to be able to fit it within the container area. You can update the code and use this:

<div class="make-it-fit"><a href="tel:1-913-908-1995">1-913-908-1995</a></div>

<div class="make-it-fit"><a href="mailto:shawnswanson@dallaspersonalshopper.com" style="word-wrap: normal;outline: none;">shawnswanson@dallaspersonalshopper.com </a></div>

And then in your custom css section, you can add this:

@media(max-width: 767px){
  .make-it-fit {
    font-size: 12px;
  }
}

Hope this helps.

#9

Thank you, I’m sorry I’m so difficult…but really a first timer here!!! Where exactly do I enter the custom css section? (Is it when I have the text box highlighted, on the left I see a css button above the js button - if so, do I just click on that and add what you have sent underneath what is there? Can you please advise on where I specifically will add this…this is what it reads when I click on the css button now…

/*
No need for style tags here;
simply get started by writing
CSS! Watch as your changes
are reflected live in the
preview area. Have fun!
*/

#10

Hello There,

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

You can find this in the left side panel in Cornerstone.

#11

y’all are the best!!! Thank you so much! This appears to have fixed it on the smaller device I have access to running a trial on!
(Any tips for sites/resources I can research and use to learn more on code?)

#12

Hi @lyndsaylaveau,

You’re most welcome.

Feel free to ask us again.

In regards to the resources, we are not allowed to recommend any external sites or resources on how to learn more about code but no worries, you could easily search sources in the web where you can learn more about codes.

Guide for X theme usage:

Hope it helps.

Thanks.

#13

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