Hi, great theme! I am a premium user and was wondering if you could look at my page, i can’t seem to fins the right sheet to and or the media query is not working properly. I am attempting to have the font in the body of the home page reduce in size when the webpage goes below 768 pixels. Also I did figure out how to left align the footer and change the text size but I have not been able to get there footer when left aligned stay within the 1024 pixel width so it is aligned with the logo in the header. Any help would be greatly appreciated. Thanks JMB www.soundspeedmedia.com
This is what I have so Far, sorry if its messy, I’m new to this.
body.responsive.layout-full #page-wrapper .full-container {
max-width: 1024px !important;
}
.main-navigation a {
text-transform: uppercase;
}
/* Footer */
.layout-full #colophon {
padding-bottom: 20px !important;
padding-top: 2px !important;
max-width: 1024px !important;
}
/* Footer Font Size */
#colophon * { font-size: 16px !important; }
#colophon * {text-align: left !important; }
/* Main Container */
#main {
min-height: 250px;
}
@media all and (max-width: 768px) {
#main.site-main {
font-size: 1em;
}
}
@media all and (max-width: 300px) {
#main.site-main {
font-size: 1em;
}
}
Hi Jmb892
Thank you for your kind words
You can change this with some custom CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.
For the text on homepage only
@media screen and (max-width: 768px) { body.page-id-17 .entry-content { font-size: 10px !important; } }For the footer
#colophon{ margin-left:135px !important; }Try that out
Cheers
thanks! these additions worked although another problem has arisen in the footer as a result of the code for the margin. Now when viewing on a smartphone the margin is pushing the text in footer to the right side of the screen places words on top of each other. On small screens i’d just like it centered. Thanks again
Hi Jmb892
Sorry about that add this:
@media screen and (max-width: 480px) { #colophon{ margin-left:60px !important; } }I tried this and the problem was still the margin-left 60 pixels with margin-left”auto” and that fixed it but for some reason only on the home page. The other pages still have the text in footer pushed up against right side or page on mobile. Here is the code
[body.responsive.layout-full #page-wrapper .full-container {
max-width: 1024px !important;
}
.main-navigation a {
text-transform: uppercase;
}
/* Footer */
.layout-full #colophon {
padding-bottom: 20px !important;
padding-top: 2px !important;
}
#colophon{
margin-left:165px !important;
}
#colophon * {text-align: left !important; }
/* Footer Font Size */
#colophon * { font-size: 16px !important; }
/* Main Container */
#main {
min-height: 250px;
}
@media screen and (max-width: 768px) {
#colophon{
margin-left:auto !important;
}
}
@media screen and (max-width: 768px) {
body.page-id-17 .entry-content {
font-size: 12px !important;
}
}]
Hi Jmb892
I have checked this on my phone and the issue seems to be solved.
Please perform the following steps and let me know the outcome
1. If you use a cache plugin please empty and disable it for now.
2. Please clear your browser cache.
3. Finally perform a cache busting reload > Cmd/Ctrl + Shift + R
Cheers