Tagged: header, mobile, non-responsive, quick css, responsive
Hi!
The H3 heading (site-wide) appears to be non-respnsive so when viewed on mobile devices becomes unreadable. Please can you advise?
Many thanks
Lauren
Anyone got any thoughts on this – need to get it resolved today…
Hi Lauren,
Without seeing an example live there isn’t much we can do. There are multiple variations of the h3 within the theme so it depends on where exactly its in place.
The special heading for instance is specifically set not to have a line-break but there is a way around it. If its somewhere else it could be something similar but we just need a bit more information to assist in a fix.
Regards,
Devin
i am also having this problem. see photo here http://thepsychreport.com/test1/ vs. desktop view at http://www.thepsychreport.com
“Welcome to The Psych Report (Beta)” is cut off
Hi,
Please add this on your custom.css or Quick CSS
/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */
@media only screen and (max-width: 640px) {
/* Add your Mobile Styles here */
.template-page .entry-content h2, .av-special-heading h3 {
font-size: 15px;
}
}
Regards,
Ismael
I tried it in the quick css but no cigar. If i am using a child theme should i go through custom.css? or does it not matter?
No, if you’re using a child theme you can insert the code into the child theme style.css file. You can also try to add an important tag to the code like
@media only screen and (max-width: 640px) {
/* Add your Mobile Styles here */
.template-page .entry-content h2, .av-special-heading h3 {
font-size: 15px !important;
}
}