I have added 100px top margin to the inner pages of this site: http://tpl-007.1stbydesign.info/reservations/ so that the text on top of the image is not obscured behind the nav menu.
However, on an ipad in portrait orientation, the margin isn’t being employed for some reason, and the text is up too high and under the logo and nav menu - see here: http://cl.ly/0D2g1X3l2j3E.
How can this be fixed?
Any help greatly appreciated.
Hey Fenwick,
I’ve just checked your Website with my browser inspection and I realized that you’ve set the padding-top to 100px in the row layout of the background image. I couldn’t locate the margin-top 100px you mentioned above. To fix the text and logo issue there, try adjusting the padding-top values in the row layout to 150px. Let us know how it goes!
Thanks!
KC
Thanks KC - that worked. Appreciate your help with this.
Now that only leaves reducing the padding height on mobile. What custom CSS would you use for that do you think?
Hey Fenwick,
I don’t really recommend using custom CSS, but I’ll just give that to you just in case you needed it. I have a workaround for you and it’s a little hassle now but easier for you to manage in the future. To do that, let’s duplicate the row layout of the header background. Then set the first header background row layout Responsive Settings to display on “Large & Medium Devices Only” and second header background to “Small Devices Only”. Feel free to adjust the padding for the second header background and test everything. Once you’ve done, you’ll have control of the padding without using custom CSS. I’ve attached a screenshot for your reference. Let us know how it goes! 
@media screen and (max-width: 360px) {
.fl-builder-content .fl-node-565c2fb83a3e0 .fl-row-content-wrap {
padding: 10px 0px 20px;
}
}
Thanks!
KC