Return to previous page

Text on pages not appearing responsive - by Pivotal5

This topic has 11 replies, 3 voices, and was last updated 8 years, 9 months ago ago by Eva Kemp

Pivotal5

Participant

March 8, 2016 at 21:53

Hi there,

I’m not sure what I’m missing, but on each of my pages, certain sections of the page are not showing up responsive when I view the website on my iPhone. It’s showing up with only one word per line, sometimes. See attached screenshots. I’ve separated the screenshots per website page.

PAGE: http://www.highxtraining.com/devsite

In these screenshots, the third line of the slider is nearly impossible to read and the buttons are shoving over the blue section of the image: http://www.highxtraining.com/devsite/wp-content/uploads/2016/03/IMG_3425.png and http://www.highxtraining.com/devsite/wp-content/uploads/2016/03/IMG_3426.png.

In this screenshot, the section that reads “THE PHYSIOLOGICAL RESPONSE TO HIGHX” is showing up like this: http://www.highxtraining.com/devsite/wp-content/uploads/2016/03/IMG_3427.png.

PAGE: http://www.highxtraining.com/devsite/index.php/become-a-coach/
The text at the top of the page that says “HIGHX VIRTUAL TRAINING” appears like this on the mobile device: http://www.highxtraining.com/devsite/wp-content/uploads/2016/03/IMG_3428.png.

Further down in the page, the section that reads “ONCE CERTIFIED YOU CAN TEACH YOUR CLASSES ANYWHERE*” appears like this: http://www.highxtraining.com/devsite/wp-admin/upload.php?item=17265.

And finally, at the bottom of the page in the section where it says “PRODUCT PACKAGES,” the font that is used for the buttons is not showing up correctly. It appears like this: http://www.highxtraining.com/devsite/wp-content/uploads/2016/03/IMG_3430.png.

Could you help me understand this? I’m not sure if I used padding to create spacing on the left and right of the text when I should have used margins, but, it’s a big problem.

My credentials are included as well, so feel free to look at the pages on the backend. Thanks!

Please, contact administrator
for this information.

#116536 Copied

10 Answers

Pivotal5

Participant

March 8, 2016 at 21:56

SO sorry, I sent the wrong link. Look at this screenshot for the “ONCE CERTIFIED YOU CAN TEACH CLASSES ANYWHERE” part: http://www.highxtraining.com/devsite/wp-content/uploads/2016/03/IMG_3429.png.

#116537 Copied

Eva Kemp

Support staff

March 10, 2016 at 08:56

Hello,

The credentials you provided are incorrect. Please check them.

Thank you.
Regards,
Eva Kemp.

#116756 Copied

Pivotal5

Participant

March 10, 2016 at 11:01

Sorry! We changed the passwords/usernames

Please, contact administrator
for this information.

#116796 Copied
Eva Kemp

Support staff

March 10, 2016 at 14:19
Hello,

The reason the custom heading is displayed like this http://storage1.static.itmages.com/i/16/0310/h_1457615449_1347511_141f74d515.png is because you set margin-right and margin-left values in VC editor http://storage5.static.itmages.com/i/16/0310/h_1457615525_1714993_579ee971cb.png . If they are removed the block is shown fine http://storage9.static.itmages.com/i/16/0310/h_1457615570_1332275_aa4f12ceb9.png .

As for this text http://www.highxtraining.com/devsite/wp-content/uploads/2016/03/IMG_3428.png you can change font size using this css code in Theme Options > Custom CSS > Custom CSS for mobile:
```
.vc_custom_1457534291981 {
 font-size: 20px !important;
}
```
Also add this code:
```
p {
 margin-left: 0 !important;
 margin-right: 0 !important;
}
```
Sorry but it’s unclear what is wrong with font here http://www.highxtraining.com/devsite/wp-content/uploads/2016/03/IMG_3430.png . Could you please clarify?

Thank you.

Regards,
Eva Kemp.
#116858 Copied
Pivotal5

Participant

March 10, 2016 at 14:35

Okay, so is there a way that I can increase the space on the left and right of text, that will not mess up the way it looks on mobile? For example, I don’t want my text to go all the way across the width of the screen, so I added the margin on both sides so the text stays within a certain width. Should I do that a different way?

I will try what you sent over about changing the font size in the CSS.

For the third part about the font, the font needs to be “Roboto” as it appears here: http://www.highxtraining.com/devsite/wp-content/uploads/2016/03/Screen-Shot-2016-03-10-at-7.20.46-AM.jpeg, as opposed to the serif font that appears here: http://www.highxtraining.com/devsite/wp-content/uploads/2016/03/IMG_3430.png.

One more question for you: why does the text appear LEFT aligned on mobile, when it’s centered on the computer screen? The home page (highxtraining.com/devsite) has a section that says “WHAT IS HIGHX?” and the text below it is CENTERED on the computer screen: http://www.highxtraining.com/devsite/wp-content/uploads/2016/03/Screen-Shot-2016-03-10-at-7.31.17-AM.jpeg. but on my phone it appears like this: http://www.highxtraining.com/devsite/wp-content/uploads/2016/03/IMG_2201.png.

Does that have something to do with the margin? Again, I put extra margin in the tag so that I could have the extra space on the left and right, so the text didn’t go across the entire page.

High intensity, explosive training and conditioning program. HIGHX is a functional, systematic training format structured into multiple circuits.

should I be using something different? Or should I just create 3 columns in the VC editor and do it that way?

Thanks so much for all of your help. You guys are the best.

#116865 Copied

Pivotal5

Participant

March 10, 2016 at 14:42

OH MY GOSH. Adding the code you sent over to the mobile CSS file helped immediately!!! YOU ARE A LIFESAVER!!!!!!

#116872 Copied
Eva Kemp

Support staff

March 10, 2016 at 16:50
Hello,

so is there a way that I can increase the space on the left and right of text, that will not mess up the way it looks on mobile? For example, I don’t want my text to go all the way across the width of the screen, so I added the margin on both sides so the text stays within a certain width. Should I do that a different way?

You can use VC editor to set margin values, we’ll give you other code for mobile view. As I see you’ve removed the values now. Do you still want to use them?

For the third part about the font, the font needs to be “Roboto”

Please add this code in Theme Options > Custom CSS > Global Custom CSS:
```
.ubtn {
 font-family: Roboto !important;
}
```
why does the text appear LEFT aligned on mobile

As I see now it’s shown properly. Please clear browser cache and check.

Regards,
Eva Kemp.
#116895 Copied
Stan Russell

Participant

March 10, 2016 at 16:51

Hello Pivotal5,

You are welcome! We are glad to help you and thanks for good thoughts!
Would be very appreciate if you leave a rating! You can do this in Downloads area. Login to your account on ThemeForest, go to Downloads area, find Royal theme and you’ll see the stars next to it.
Thank you!

Regards,
Stan Russell.

#116896 Copied

Pivotal5

Participant

March 10, 2016 at 16:57

You can use VC editor to set margin values, we’ll give you other code for mobile view. As I see you’ve removed the values now. Do you still want to use them?

I would still like to use them, yes. So I can re-enter the margins if needed, correct? and then you will give me a code to control them in mobile?

As for the part that was previously showing up left aligned, that’s corrected now, yes.

And I will add in the quote you sent over for the font.

Thank you!

And Stan – I will absolutely give a rating!!

#116899 Copied

Eva Kemp

Support staff

March 10, 2016 at 18:39

Hello,

I would still like to use them, yes. So I can re-enter the margins if needed, correct? and then you will give me a code to control them in mobile?

Yes, you’re correct.
Readd the margin values and let us know.

Regards,
Eva Kemp.

#116914 Copied
Tagged: not appearing, pages, responsive, templates, text, woocommerce, wordpress
Viewing 11 results - 1 through 11 (of 11 total)