Gaps in my header template

How To
1

Hello, I am new to web development and it is my first time using Bricks to build a website. I created a simple header template and there are these large empty spaces that appear in preview to the left of the Travel text and to the right of the star icon that aren’t present in the editor. I’m sure this is a super easy fix but I haven’t been able to figure it out myself yet.

Any help is appreciated. Thank you

Screenshot 2024-02-10 at 10.40.51 PM
Screenshot 2024-02-10 at 10.40.51 PM2828Ă—1572 219 KB

2

Welcome to Bricks!
By default the “Container” element has width = 1000px, and it’s centered horizontally.
So if

  • the browser window width is larger than 1000px you get the “gaps in side” scenario
    (like the “preview” in your screenshot).
  • If browser window is lesser than 1000px you get a “full width” scenario (like “builder” view in your screenshot).

These settings are defined by bricks and you can customize them in “Builder > Theme Styles > Container”.

You can change the width of the builder view in the top bar in the middle, where you can update the number (look for 992 in your screenshot) and press Enter. Try with 1300…

Look also these resources

3

Thank you tresorama for the information and the resources! I managed to fix my issue with your help