2 top bars - adjustment of spacings

[blueprint]

As reqeusted by the support team I’m opening up a new thread.
I’m using two different top bars for mobile and desktoop. everthing seems to work so far, exept that the spacing of the top bar for mobile and tablet screens are different.

The code looks like this.

@media (max-width: 970px) {
.x-topbar .p-info {
   padding-top:0.8em;
  padding-bottom:0.5em;
}
}

When I cange the value for padding-top to 0, the spacing of the mobile view is too small; changing it to a higher value, it looks good on mobile but is too big on tablet…

Can you maybe provide a code to separately adjust the values for mobile and tablet screens?
Thanks!

[thai]

Hi There,

You can try with this CSS:

/* tablet */
@media (max-width: 979px) {
	.x-topbar .p-info {
		padding-top: 1.8em;
		padding-bottom: 1.5em;
	}
}
/* mobile */
@media (max-width: 480px) {
	.x-topbar .p-info {
		padding-top:0.8em;
		padding-bottom:0.5em;
	}
}

Let us know how it goes!

[blueprint]

Thank you for that code, but it has negative effects on the spacings of the desktop view and it is still not possible to edit one of the 2 codes without effect to the other or even no effect at all. Is it possible that there is some other code that conflicts with these new ones? I can not figure out which one.
(I removed your suggested codes from the site again)

[basanta]

HI There,

You are right there is a margin which is causing the issue.

Please replace this code with yours.

@media (max-width: 970px) {
.x-topbar .p-info {
   padding-top:0.8em;
  padding-bottom:0.5em;
  margin: 0px !important;
}
}

Hope this helps!

[blueprint]

Thanks! That was it!!

[basanta]

You are most welcome!

Thanks