Community Forums › Forums › Archived Forums › Design Tips and Tricks › Essence Pro Theme Mobile Responsive Display Problems
Tagged: Essence Pro, mobile responsive
- This topic has 5 replies, 5 voices, and was last updated 5 years, 8 months ago by
janef.
-
AuthorPosts
-
March 23, 2019 at 2:27 pm #490226
GeneW
ParticipantHello,
I'm using the Essence Pro theme at https://genewhitehead.com and my mobile display is displaying text with just a few letters at a time on each line. There is also a side scroll being produced.
After searching the forums and online for solutions, I admit defeat. Is there anyone who could look at this and help direct me to steps I could take to troubleshoot, or even a solution?
Thank you.
https://genewhitehead.comMarch 23, 2019 at 3:32 pm #490228Victor Font
ModeratorYour site seems to be missing some mobile CSS. Eiether that or there may be a bug in the style sheets that is preventing the mobile CSS from being read.
The front-widgets should adjust so each post is stacked one atop the other. The width, padding, and margins should also auto-adjust.
As for the side-scroll, this is coming from your flex box arrangement in the footer-cta. It looks like you added a lot of custom code and didn't adjust for the display in the media queries.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?March 25, 2019 at 3:23 pm #490270GeneW
ParticipantHi Victor,
Thank you for your help. It looks much, much better now!
I ended up having to do away with my flexbox while I try to figure out how to adjust for mobile display in the media queries. Do you happen to know a resource where I can find that?
I tried by adding min-width: 200px; to the .flex-wrapper and the .card lines on my css but that didn't do anything at all.
May 19, 2019 at 7:58 am #491231thinkmedia
MemberI just ran into this exact problem with Essence Pro.
I have three widgets on the home page and they don't resize on mobile so I had to add custom css to do it.
@media only screen and (max-width: 860px) {.flexible-widgets.widget-thirds .widget {
margin-bottom: 20px;
padding: 20px;
}}
You can adjust the max-width for where you want the point of adjustment to occur.
Pretty annoying for the theme not to do it as it is intended.
Hope that helps.
May 20, 2019 at 12:10 pm #491250urdunovels
MemberI have the same problem at my site NewNaat. when I check it on my mobile which is 360px wide then the browse element Like A B C become so smaller.
June 17, 2019 at 8:21 am #491667janef
ParticipantHi, I'm running in to the same issue with reducing padding on mobile display between front page widgets in Essence Pro.I tried the following but this did not change anything. I also changed margin-bottom to 0px but this did not change anything either.I am using the Front Page 1 and Front Page Featured widgets and there is too much padding between the two on mobile display.Any feedback would be greatly appreciated. https://bit.ly/2IkwceO
@media only screen and (max-width: 860px) {
.flexible-widgets.widget-fourths .widget,
.flexible-widgets.widget-halves .widget,
.flexible-widgets.widget-thirds .widget {
float: none;
margin-left: 0;
width: 100%;
margin-bottom: 20px;
padding: 20px;
}}
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.