How do I apply a larger header height on smaller browser window sizes as a result of using a logo as seen on the "Features" page?
1. Click on "Page Info" under Site or press Shift ⌘ I to open your RW Page Inspector.
2. Click on Header, in between the Sidebar and Styles tabs.
3. Click on the CSS button which will allow you to enter Custom CSS.
4. Copy and paste the following code into the text box:
/* All Mobile Sizes (devices and browser) */
@media only screen and (min-width: 480px) and (max-width: 768px) {
#topHeader {
height: 110px;
}
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
#topHeader {
height: 110px;
}
}
/* End Code */
5. Preview page and enjoy a customized mobile header height.
2. Click on Header, in between the Sidebar and Styles tabs.
3. Click on the CSS button which will allow you to enter Custom CSS.
4. Copy and paste the following code into the text box:
/* All Mobile Sizes (devices and browser) */
@media only screen and (min-width: 480px) and (max-width: 768px) {
#topHeader {
height: 110px;
}
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
#topHeader {
height: 110px;
}
}
/* End Code */
5. Preview page and enjoy a customized mobile header height.