Mobile preview on wordpress looks very different then how it actually renders on the phone.

Questions › Category: Questions › Mobile preview on wordpress looks very different then how it actually renders on the phone.
0 Vote Up Vote Down
Rachel Prejean asked 10 months ago

I’m encountering an interesting error with my site regarding mobile. The mobile preview on wordpress looks very different then how it actually renders on the phone. Any way to get these to be the same so I can make edits more effectively? Even though I have the “stacked” setting for the images on, it isn’t pushing that layout to mobile in reality. I’ve searched the internet for a fix but I’m not sure which one would be best and got a little overwhelmed. See below for snip it examples. Thanks!
 
Mobile Preview on WordPress:  Looks great!
image.png
 
 
 
 
 
 
 
 
Actual view on Iphone 13: Heading sizing issues
 
image.png
 

1 Answers
0 Vote Up Vote Down
Support Team Staff answered 10 months ago

We have code in the theme file to create the 2 blocks side by side.  You can try to shrink the text further, by clicking on the text itself, then the mobile icon and adjusting down the font size.  If that doesn’t work, or makes the text too small, you can remove the sidebyside feature.  To do this, click on the first block, make sure it is the entire block and then over in the editor click the Advanced Tab, then down at the bottom click on Advanced > Then where it says Additional CSS remove hr-one.  Then follow the same steps for the block right below that one and remove hr-two.  Then do the same steps for the third column of blocks.  That will have them display like the editor shows, all stacked and more room for your text. 
 

Rachel Prejean replied 10 months ago

This fixed it! Thank you!