Different logo and mobile button alignment per screen size

[stonerome]

In regular X - looking to add custom css per screen size to make small adjustments to placement of logo and mobile button - essentially the top margin. I believe that once the Cornerstone options are going to have differnt setting per break point that will be built in, but for now, assuming custom CSS is the way to go. Just not sure exactly how to set it up - something like…

@media (min-width: 979px) {
.x-brand img {
margin-top:-20px;
}
}

@media (min-width: 767px) {
.x-brand img {
margin-top:-15px;
}
}

Just not sure how to set up the 5 breakpoints, and whether to use min-width or max-width?

Site dealing with: https://www.klaschoolsaventura.com/

[marc_a]

Hi @stonerome,

Thanks for reaching out!

See the lists below the breakpoint we use in the builder:

• XL: (1200px and up)
• LG: (979px to 1199px)
• MD: (767px and 978px)
• SM: (480px and 766px)
• XS: (below 480px)

That being said, your media queries should look like this.

@media (max-width: 479px) {
	/*your CSS code here for mobile portrait*/
}

@media (min-width: 480px) and (max-width: 766px) {
	/*your CSS code here for moile landsacpe*/
}

@media (min-width: 767px) and (max-width: 978px) {
	/*your CSS code here for tablet*/
}

@media (min-width: 979px) and (max-width: 1199px) {
	/*your CSS code here for laptop*/
}

@media (min-width: 1200px) {
	/*your CSS code here for desktop*/
}

Hope that helps.

[stonerome]

thank you for this! Much appreciated.

[marc_a]

Hi @stonerome,

You’re welcome and it’s our pleasure to help you! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.