Essence Pro Theme Mobile Responsive Display Problems

[GeneW]

Hello,

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.

---

Writing at Simple Theology, Messy Life | Resources for Spiritual Growth

https://genewhitehead.com

[Victor Font]

Your 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?

[GeneW]

Hi 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.

---

Writing at Simple Theology, Messy Life | Resources for Spiritual Growth

[thinkmedia]

I 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.

[urdunovels]

I 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.

[janef]

Hi, 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;
}

}

[Author]

Posts