Hi,
I’ve been trying to follow this mini-tutorial to fix the responsiveness of Tesseract theme: https://siteorigin.com/thread/page-builder-background-image-wont-rescale-for-mobile-devices/
Every time I plug in code to the editor, it gets applied to the webpage, but when I inspect element on chrome, there is no trace of it. Here is the code I’m using:
@media (min-width: 680px) {
.home-background .textwidget {
padding-top: 20px;
padding-bottom: 450px;
}
}
@media (min-width: 680px) {
.home-background .textwidget .home-eadline {
font-size: 51px;
font-style: normal;
font-weight: 500;
letter-spacing: 8px;
font-family: 'Roboto';
}
}
This should be the code used:
@media (min-width: 680px) { .home-background .textwidget { padding-top: 20px; padding-bottom: 450px; } }@media (min-width: 680px) { .home-background .textwidget .home-eadline { font-size: 51px; font-style: normal; font-weight: 500; letter-spacing: 8px; font-family: 'Roboto'; } }Ahh nvm figured it out!
The last issue I’m having is getting rid of the whitespace between my background image and the footer. If you look at an iPhone 5 mobile view while doing element inspect in chrome, the whitespace appears. Any help would be appreciated!