Web View Vs Mobile View

I'm having a sizing issue using the footer widgets where I can't get text information to appear similarly on standard web view and mobile. See www.hhiwindows.com...the middle footer widget. It has two addresses. To get the addresses to appear on separate lines on the web view I had to use 12pt font...On the mobile view to get the same effect I had to use 8pt font, which of course messes up the web view.

I can't quite put my finger on the best way to fix it...

Thanks.

 

Hello,

Paste the code given below in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

.footer_widget .textwidget span strong {
font-size: 12px;
}
.footer_widget .textwidget a {
font-size: 12px;
}
 
@media only screen and (min-width: 767px) and (max-width: 960px) {
.footer_widget .textwidget span strong {
font-size: 12px;
}
.footer_widget .textwidget a {
font-size: 12px;
}}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.footer_widget .textwidget span strong {
font-size: 8px;
}
.footer_widget .textwidget a {
font-size: 8px;
}
}
@media only screen and (max-width: 480px){
.footer_widget .textwidget span strong {
font-size: 8px;
}
.footer_widget .textwidget a {
font-size: 8px;
}
}

Adjust the values as per your requirement.
This will solve your issue.

 

After playing with the font sizes a bit , it worked like a dream....As always, THANKS!