Big Cartel Theme Support

How do I change the margin and alignment of my header text, image or logo?

How do I change the margin and alignment of my header text, image or logo?

Adjusting header alignment

To adjust your header alignment, navigate to your custom style coding area - see Where do I add custom style code?

To center align your header, add the following custom CSS:

/* Set header alignment */
.main-header {
	text-align: center;
}

To right align your header, add the following custom CSS:

/* Set header alignment */
.main-header {
	text-align: right;
}

To left align your header, add the following custom CSS:

/* Set header alignment */
.main-header {
	text-align: left;
}

Click the Done button and then the Save link when you have finished editing your CSS.

Adjusting header padding and margin

Be careful when adding left or right padding and margins as this can cause unwanted results on smaller screens. Always check your changes on both large and small screens and, if necessary, apply different padding and margin values for the mobile layout (see last example below).

To adjust your header padding and margins, navigate to your custom style coding area - see Where do I add custom style code? - and add the following CSS:

/* Set header alignment & margins */
.main-header {
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	text-align: center;
}

Note that you can group all styles for the .main-header element. In our example, we have included the text-align style from the previous section of this article.

Our example above resets all padding and margin values to zero. If you do not wish to reset or edit particular values, you can remove the relevant styles.

For example, if we only wanted to increase the spacing above and below the header we would have:

/* Set header alignment & margins */
.main-header {
	padding-top: 20px;
	padding-bottom: 30px;
	margin-top: 0;
	margin-bottom: 0;
	text-align: center;
}

Note that values are whole numbers with px appended, which translates to pixels.

For the next example, lets say we want to keep the standard alignment and move the header up the page by 15px. We reset the top padding to zero and then use a negative top margin (only margins can have negative values).

/* Set header alignment & margins */
.main-header {
	padding-top: 0;
	margin-top: -15px;
}

For the next example, lets say we wanted to increase the spacing above and below the header by different amounts for the desktop and mobile layout:

/* Set header alignment & margins */
.main-header {
	padding-top: 50px;
	padding-bottom: 50px;
	text-align: center;
}
/* Extra paddding for mobile */
.mobile-ui-on .main-header {
	padding-top: 80px;
	padding-bottom: 80px;
}

Click the Done button and then the Save link when you have finished editing your CSS.

If you have uploaded a header image or logo, please be sure to read all of the article How do I upload and style my own logo or header image for my Big Cartel theme? to get the best results on all devices.

AarcadeHow do I change the margin and alignment of my header text, image or logo?