toggle mobile menu

Adding custom CSS to a website


Sometimes LiquidBlox styling features do not cover all the needs of the project. If you know CSS, you can write your own custom styles as shown in this tutorial.

Features shown in this tutorial are available in ProBusiness and Enterprice plans.


Skills needed: 

CSS, browser inspector

In this case, there is a hero-banner element with text content on top and navigation content on the bottom. The single navigation button loses its centered alignment in mobile view by default. Follow the steps below to align the button in mobile view by adding a class to the navigation element and writing custom CSS code using new class for targeting the styles.

Step 1 - Custom class


Click Advanced in the content block settings.


Or use the wide block settings as shown in:

Wide block settings tutorial


Give the custom class a name and click OK.

Step 2 - Find the correct styles to overwrite


Inspect the page (with browser's developer tools) in mobile view and locate the classes to target and styles to overwrite.


In this case the style justify-content in div with the class navi-parent seems to align the button to the left. Justify-content value needs to be changed from space-between to center to move the button to the center on the mobile view.

Step 3 - Open code editor for the head section of the site


Open Page Manager and activate the site by clicking its name on the list on the left. 


Once the site is activated click </> Head button.

Step 4 - Write the CSS


Start by adding opening and closing style tags: <style></style>



Classes for targeting explained:

.mobile = targets only mobile devices

.my-centered-button = custom class created to target only selected element

.navi-parent = the target class found by inspector



CSS explained:

justify-content: center !important; = center for centering the button and  !important for overdriving other styles.

CSS classes used for targeting in LiquidBlox


.desktop-view = BODY class to target computers' browsers
.mobile = BODY class to target smart phones' browsers
.tablet = BODY class to target tablets' browsers

.website-view = DIV class to target only site or publication (not editor)
.editor= DIV class to target editor (not sites or publications)

Adding custom CSS to a website


Sometimes LiquidBlox styling features do not cover all the needs of the project. If you know CSS, you can write your own custom styles as shown in this tutorial.

Features shown in this tutorial are available in ProBusiness and Enterprice plans.


Skills needed: 

CSS, browser inspector

In this case, there is a hero-banner element with text content on top and navigation content on the bottom. The single navigation button loses its centered alignment in mobile view by default. Follow the steps below to align the button in mobile view by adding a class to the navigation element and writing custom CSS code using new class for targeting the styles.

Step 1 - Custom class


Click Advanced in the content block settings.


Or use the wide block settings as shown in:

Wide block settings tutorial


Give the custom class a name and click OK.

Step 2 - Find the correct styles to overwrite


Inspect the page (with browser's developer tools) in mobile view and locate the classes to target and styles to overwrite.


In this case the style justify-content in div with the class navi-parent seems to align the button to the left. Justify-content value needs to be changed from space-between to center to move the button to the center on the mobile view.

Step 3 - Open code editor for the head section of the site


Open Page Manager and activate the site by clicking its name on the list on the left. 


Once the site is activated click </> Head button.

Step 4 - Write the CSS


Start by adding opening and closing style tags: <style></style>



Classes for targeting explained:

.mobile = targets only mobile devices

.my-centered-button = custom class created to target only selected element

.navi-parent = the target class found by inspector



CSS explained:

justify-content: center !important; = center for centering the button and  !important for overdriving other styles.

CSS classes used for targeting in LiquidBlox


.desktop-view = BODY class to target computers' browsers
.mobile = BODY class to target smart phones' browsers
.tablet = BODY class to target tablets' browsers

.website-view = DIV class to target only site or publication (not editor)
.editor= DIV class to target editor (not sites or publications)

toggle mobile menu

Adding custom CSS to a website


Sometimes LiquidBlox styling features do not cover all the needs of the project. If you know CSS, you can write your own custom styles as shown in this tutorial.

Features shown in this tutorial are available in ProBusiness and Enterprice plans.


Skills needed: 

CSS, browser inspector

In this case, there is a hero-banner element with text content on top and navigation content on the bottom. The single navigation button loses its centered alignment in mobile view by default. Follow the steps below to align the button in mobile view by adding a class to the navigation element and writing custom CSS code using new class for targeting the styles.

Step 1 - Custom class


Click Advanced in the content block settings.


Or use the wide block settings as shown in:

Wide block settings tutorial


Give the custom class a name and click OK.

Step 2 - Find the correct styles to overwrite


Inspect the page (with browser's developer tools) in mobile view and locate the classes to target and styles to overwrite.


In this case the style justify-content in div with the class navi-parent seems to align the button to the left. Justify-content value needs to be changed from space-between to center to move the button to the center on the mobile view.

Step 3 - Open code editor for the head section of the site


Open Page Manager and activate the site by clicking its name on the list on the left. 


Once the site is activated click </> Head button.

Step 4 - Write the CSS


Start by adding opening and closing style tags: <style></style>



Classes for targeting explained:

.mobile = targets only mobile devices

.my-centered-button = custom class created to target only selected element

.navi-parent = the target class found by inspector



CSS explained:

justify-content: center !important; = center for centering the button and  !important for overdriving other styles.

CSS classes used for targeting in LiquidBlox


.desktop-view = BODY class to target computers' browsers
.mobile = BODY class to target smart phones' browsers
.tablet = BODY class to target tablets' browsers

.website-view = DIV class to target only site or publication (not editor)
.editor= DIV class to target editor (not sites or publications)