ByteEditor Site Builder

Wiki menu

Custom CSS for the Gallery layouts

By following the steps in this instruction, you will be able to add custom CSS for gallery layout. You can use the code snippets provided in the guide to recreate this layout, or you can modify the steps to tailor the layout to your specific needs.
Screenshot At Dec 04 19 35 45

Step 1. Add custom CSS code

  1. Open the design page you've chosen
  2. Go to the Custom CSS tab
  3. Please copy the following code and add custom CSS code in the provided space
.custom-gallery-style .gallery-item{
max-width: 300px;
width:100%;
height: 300px;
border-radius: 50%;
}
 
.custom-gallery-style [class^=col]{
display: flex;
justify-content:center;
}
Дизайн Без Назви (2)

⚠ Note

Please note that the design with Custom CSS must be specified for the page where you want to change the elements

Step 2. Add custom CSS classes

1. Open the page with the gallery layout 
2. Click on the gallery layout to open the right-side menu 
3. Copy the following custom CSS class and add it to the Custom CSS field

custom-gallery-style
Дизайн Без Назви (3)

Congratulations!

You now know how to add custom CSS code to your layouts.  

The result of the work done!

Screenshot At Dec 04 20 11 13
Previous
Next
Built with ByteEditor