Header + Margins on mobile devices

  • Resolved polsogood

    (@polsogood)


    2 years, 2 months ago

    Hello everyone. The header does not show the same for the mobile version as it does for the computer version. Transparent header is active. Sticky header is active. Would you know how to put it the same way?

    I would also like to get rid of these margins that show on mobile devices on the left and right of full-width pictures. I think both issues are linked.

    Would anyone happen to know how to do that? Thank you for your help!

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @polsogood,

    I checked the link you provided, and looks likely you have enabled align full for cover block. With that setting, the left and right spaces on smaller screen no longer appearing. Reference: https://i.snipboard.io/NQRa1A.jpg.

    Having the same issues. @polsogood what css did you add?
    I am trying to have the exact same effect: Transparent mobile header + sticky mobile header + full width header image or video background + normal padding/margins for content below. Tried the following but it does not do the trick.

    @media only screen and (max-width: 991px) {
#masthead-mobile {
	position: absolute;   
	top: 0;
	width: 100%;
	background-color: transparent;
	}
	.content-wrapper {
	padding-top: 0;
		margin-top: 0;
	}
	.sticky-header-active .mobile-header {
  position: sticky;
  top: 0;
	}
}
    Thread Starter polsogood

    (@polsogood)

    Hi!

    I remember using this code to do the trick. I don’t know if you have the exact same issue as I did.

    @media only screen and (max-width: 1024px) { .home .content-wrapper {
  margin-top: -100px;
	padding: 0;
	width: auto; }
}

    It worked but since then I have switched to Botiga Pro and haven’t had any issue with this ever again.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Header + Margins on mobile devices’ is closed to new replies.