-
Posts
-
Hi,
I’ve added social media icons to the top bar and made the phone number a bit bigger, but now on tablet size the phone number gets pushed down and only half shows.
I’ve added this css to make the phon nr bigger and the container higher:
div#header_meta.container_wrap.container_wrap_meta {
height: 50px !important;
}
.phone-info span {
line-height: 1.4em !important;
font-size:1.4em !important;
padding-top:11px;
}
This works fine on big screen.And I’ve tried the following css to make it work on the ipad:
@media only screen and (max-width: 767px){
div#header_meta.container_wrap.container_wrap_meta {
min-height:200px !important;
}
.responsive .phone-info span {
min-height:80px!important;
}
}But this doesn’t work. I hope you can help me.
Kind regards,
LisaHey sundara88,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-width: 767px) { div#header_meta.container_wrap.container_wrap_meta { min-height: 80px; padding-top: 10px; }}Best regards,
VinayThanks Vinay, but that didn’t work either… could some of my other css be causing the problem?
Thanks, lisaHi,
I enabled social icons and added the code i provided previously in Quick CSS and it works perfectly fine :)
Please see attached screenshot. If you do not see the same please try to hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload” and review the site again.
Best regards,
Vinay
- The topic ‘phone number cut off by social media icons on tablet’ is closed to new replies.