Hello,
i am using Vantage Theme and i am new in Site designing. I am trying to make my masthead content responsive in smaller screens and in mobile and tablet screens. I achieved this with the Logo, but the text i have on the right of the logo doesn’t scale in smaller screens.
I tried some changes on CSS code, but i couldn’t fix this.
body.responsive.layout-full #page-wrapper .site-header .full-container {
max-width: 95% !important;
}
#masthead .hgroup .logo img {
line-height: 0px;
font-size: 0px;
margin: 0px;
padding: 0px;
top: 0px;
width: -1px;
height: -1px;
margin-left: 0cm;
margin-bottom: -14px;
margin-top: -18px;
margin-right: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 6px;
padding-top: -2px;
}
#masthead.site-header {
margin-left: 0px;
padding: 0px;
background-color: #ffffff;
margin: 0px;
}
#masthead .hgroup .support-text {
padding-right: 0px;
padding: 110px;
margin: 0px;
margin-left: 0px;
right: -69px;
margin-right: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: -46px;
line-height: 30px;
font-variant: small-caps;
letter-spacing: 3px;
text-align: center;
}
#colophon.site-footer {
margin-top: 0px;
margin-bottom: 0px;
margin: 0px;
padding-bottom: 0px;
padding: 1px;
}
#colophon #theme-attribution {
margin-top: 0px;
margin: -3px;
margin-bottom: 0px;
padding-bottom: 0px;
padding-top: 12px;
}
If there is anyone who can help me to solve this, i will appreciate it very much, because i really need to fix it.The url is http://aquel.gr/
Thanks in advance,
Antonis
Hi Antonis,
Please add the following additional CSS to reduce a lot of the empty spacing present:
@media (max-width: 780px) { #masthead-widgets .panel-grid-cell { margin-bottom: 0 !important; } #masthead-widgets .widget { padding-bottom: 0 !important; } }