Browser: Safari
OS: macOS
URL: (this is a site with coming soon mode enabled, so this issue can’t be viewed unless logged in at this time)
I am experiencing another defect where the Bricks editor displays something very differently than the frontend. The frontend looks correct, but the way Bricks is displaying it appears to be wrong in the editor.
Screenshot of what it looks like on the frontend (which is correct, follow the arrow for the part I’m referring to):
Screenshot of how this appears in the Bricks editor (which is incorrect, follow the arrow again for the part I’m referring to):
As you can see, the eyebrow line becomes a large square in the editor. It loads fine on the frontend though, thankfully.
I am attaching the JSON of the section which contains these particular set of elements, hopefully this will help in diagnosing the issue (and so you can see the current values for the sizing and everything on the eyebrow line. I did redact the source URL though for now, I hope that is okay.
{"content":[{"id":"krdelt","name":"section","parent":0,"children":["zmmwmv","becyew"],"label":"Hero","settings":{"_cssGlobalClasses":["gc0006"],"tag":"section"}},{"id":"zmmwmv","name":"container","parent":"krdelt","children":["dlvqnx","bsjxsb","ahfwfg","clesnn","igtqgc"],"label":"Hero — Content","settings":{"_cssGlobalClasses":["gc0007"],"_cssCustom":"#brxe-zmmwmv { flex: 1; min-height: 0; }"}},{"id":"dlvqnx","name":"block","parent":"zmmwmv","children":["aaicsv","dnsfdh"],"label":"Hero — Eyebrow","settings":{"_cssGlobalClasses":["gc0008"]}},{"id":"aaicsv","name":"block","parent":"dlvqnx","children":[],"label":"Eyebrow Line","settings":{"_cssGlobalClasses":["gc0008b"]}},{"id":"dnsfdh","name":"text-basic","parent":"dlvqnx","children":[],"label":"Eyebrow Text","settings":{"text":"Mission, BC — Unique Group Entertainment","_cssGlobalClasses":["gc0009"]}},{"id":"bsjxsb","name":"heading","parent":"zmmwmv","children":[],"label":"Hero Title — Line 1","settings":{"text":"Slash. Splash.","tag":"h1","_cssGlobalClasses":["gc0010"]}},{"id":"ahfwfg","name":"heading","parent":"zmmwmv","children":[],"label":"Hero Title — Smash (accent)","settings":{"text":"Smash.","tag":"h1","_cssGlobalClasses":["gc0010","gc0011"]}},{"id":"clesnn","name":"text-basic","parent":"zmmwmv","children":[],"label":"Hero Subtitle","settings":{"text":"{mb_global-settings_business_slogan_tagline}","_cssGlobalClasses":["gc0012"]}},{"id":"igtqgc","name":"block","parent":"zmmwmv","children":["ocdega","fpmspo"],"label":"Hero — Actions","settings":{"_cssGlobalClasses":["gc0013"]}},{"id":"ocdega","name":"button","parent":"igtqgc","children":[],"label":"Book an Experience","settings":{"text":"Book an Experience","style":"primary","icon":{"library":"fontawesomeRegular","icon":"far fa-calendar-check"},"iconPosition":"left","_cssGlobalClasses":[],"link":{"type":"meta","newTab":true,"useDynamicData":"{mb_global-settings_cta_link_appointment_booking}"},"size":"lg"}},{"id":"fpmspo","name":"button","parent":"igtqgc","children":[],"label":"Explore Activities","settings":{"text":"Contact Us","link":{"type":"internal","url":"#activities","postId":"133"},"icon":{"library":"fontawesomeSolid","icon":"fas fa-arrow-right"},"iconPosition":"right","_cssGlobalClasses":[],"size":"lg","style":"secondary","outline":true}},{"id":"becyew","name":"block","parent":"krdelt","children":["joejts","ktfsvw","owfqfc","otzgrz"],"label":"Hero — Stat Bar","settings":{"_cssGlobalClasses":["gc0014"],"_cssCustom":"#brxe-becyew { display: grid; }"}},{"id":"joejts","name":"block","parent":"becyew","children":["dzjumn","vybnmu"],"label":"Stat — Experiences","settings":{"_cssGlobalClasses":["gc0015"]}},{"id":"dzjumn","name":"text-basic","parent":"joejts","children":[],"label":"Stat Value","settings":{"text":"3","_cssGlobalClasses":["gc0016"]}},{"id":"vybnmu","name":"text-basic","parent":"joejts","children":[],"label":"Stat Label","settings":{"text":"Unique Experiences","_cssGlobalClasses":["gc0017"]}},{"id":"ktfsvw","name":"block","parent":"becyew","children":["lwmdgk","folyae"],"label":"Stat — Family Friendly","settings":{"_cssGlobalClasses":["gc0015"]}},{"id":"lwmdgk","name":"text-basic","parent":"ktfsvw","children":[],"label":"Stat Value","settings":{"text":"Family","_cssGlobalClasses":["gc0016"]}},{"id":"folyae","name":"text-basic","parent":"ktfsvw","children":[],"label":"Stat Label","settings":{"text":"Friendly","_cssGlobalClasses":["gc0017"]}},{"id":"owfqfc","name":"block","parent":"becyew","children":["bsyqkj","gzxyvq"],"label":"Stat — No Experience","settings":{"_cssGlobalClasses":["gc0015"]}},{"id":"bsyqkj","name":"text-basic","parent":"owfqfc","children":[],"label":"Stat Value","settings":{"text":"Zero","_cssGlobalClasses":["gc0016"]}},{"id":"gzxyvq","name":"text-basic","parent":"owfqfc","children":[],"label":"Stat Label","settings":{"text":"Experience Needed","_cssGlobalClasses":["gc0017"]}},{"id":"otzgrz","name":"block","parent":"becyew","children":["itfvio","wjhxkp"],"label":"Scroll Hint — hide at tablet via WPCodeBox: .hero__scroll { display: none; } @media (max-width:991px)","settings":{"_cssGlobalClasses":["gc0018"]}},{"id":"itfvio","name":"text-basic","parent":"otzgrz","children":[],"label":"Scroll Text","settings":{"text":"Scroll","_cssGlobalClasses":["gc0017"]}},{"id":"wjhxkp","name":"block","parent":"otzgrz","children":["krxgga"],"label":"Scroll Arrow","settings":{"_cssGlobalClasses":["gc0019"]}},{"id":"krxgga","name":"icon","parent":"wjhxkp","children":[],"label":"Arrow Icon","settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-arrow-down"}}}],"source":"bricksCopiedElements","sourceUrl":"https://{redacted}","version":"2.3.1","globalClasses":[{"id":"gc0006","name":"hero","settings":{"_direction":"column","_heightMin":"100svh","_position":"relative","_overflow":"hidden","_gradient":{"applyTo":"background","type":"linear","angle":"135deg","stops":[{"color":{"hex":"#1a0000"},"position":"0%"},{"color":{"raw":"var(--background, #0a0a0a)"},"position":"40%"},{"color":{"hex":"#000000"},"position":"100%"}]}},"modified":1775456602,"user_id":2},{"id":"gc0007","name":"hero__content","settings":{"_direction":"column","_justifyContent":"flex-end","_position":"relative","_zIndex":"2","_padding":{"top":"0","right":"60px","bottom":"80px","left":"60px"},"_padding:tablet_portrait":{"top":"0","right":"28px","bottom":"60px","left":"28px"},"_padding:mobile_portrait":{"top":"0","right":"20px","bottom":"48px","left":"20px"}},"modified":1775456602,"user_id":2},{"id":"gc0008","name":"hero__eyebrow","settings":{"_direction":"row","_columnGap":"var(--space-s)","_margin":{"bottom":"var(--space-m)"},"_alignItems":"center"},"_exists":false},{"id":"gc0008b","name":"hero__eyebrow-line","settings":{"_height":"1px","_background":{"color":{"raw":"var(--primary)"}},"_flexShrink":"0","_width":"40px"},"_exists":false},{"id":"gc0009","name":"hero__eyebrow-text","settings":{"_typography":{"font-family":"Barlow Condensed","font-size":"12px","font-weight":"600","letter-spacing":"4px","text-transform":"uppercase","color":{"raw":"var(--primary)"}}},"modified":1775456602,"user_id":2},{"id":"gc0010","name":"hero__title","settings":{"_typography":{"font-family":"Bebas Neue","font-size":"clamp(80px, 13vw, 160px)","font-weight":"400","letter-spacing":"3px","line-height":"0.88","color":{"raw":"var(--white)"}},"_margin":{"bottom":"0"}},"modified":1775456602,"user_id":2},{"id":"gc0011","name":"accent","settings":{"_typography":{"color":{"raw":"var(--primary)"}},"_margin":{"bottom":"32px"}},"modified":1775458138,"user_id":2},{"id":"gc0012","name":"hero__sub","settings":{"_typography":{"line-height":"var(--text-line-height-l)","color":{"raw":"var(--light-d-1)"},"font-weight":"300"},"_widthMax":"520px","_margin":{"bottom":"44px"}},"modified":1775456602,"user_id":2},{"id":"gc0013","name":"hero__actions","settings":{"_direction":"row","_alignItems":"center","_columnGap":"16px","_flexWrap":"wrap"},"_exists":false},{"id":"gc0014","name":"hero__foot","settings":{"_position":"relative","_zIndex":"2","_border":{"style":"solid","width":{"top":"1px","right":"0","bottom":"0","left":"0"},"color":{"raw":"var(--border)"}},"_background":{"color":{"rgb":"rgba(10,10,10,0.6)"}},"_gridTemplateColumns":"repeat(3, 1fr) auto","_gridTemplateColumns:tablet_portrait":"repeat(3, 1fr)","_gridTemplateColumns:mobile_portrait":"1fr","_alignItemsGrid":"stretch"},"modified":1775458138,"user_id":2},{"id":"gc0015","name":"hero__stat","settings":{"_direction":"column","_rowGap":"var(--space-3xs)","_padding":{"top":"28px","right":"40px","bottom":"28px","left":"40px"},"_border":{"style":"solid","width":{"top":"0","right":"1px","bottom":"0","left":"0"},"color":{"raw":"var(--border)"}},"_padding:mobile_portrait":{"top":"20px","right":"20px","bottom":"20px","left":"20px"},"_border:mobile_portrait":{"style":"solid","width":{"top":"0","right":"0","bottom":"1px","left":"0"},"color":{"raw":"var(--border)"}}},"modified":1775458138,"user_id":2},{"id":"gc0016","name":"hero__stat-val","settings":{"_typography":{"font-family":"Bebas Neue","font-size":"40px","font-weight":"400","letter-spacing":"1px","line-height":"1","color":{"raw":"var(--white)"}}},"modified":1775456602,"user_id":2},{"id":"gc0017","name":"hero__stat-label","settings":{"_typography":{"font-family":"Barlow Condensed","font-size":"11px","font-weight":"600","letter-spacing":"2.5px","text-transform":"uppercase","color":{"raw":"var(--grey)"}}},"modified":1775458138,"user_id":2},{"id":"gc0018","name":"hero__scroll","settings":{"_direction":"row","_alignItems":"center","_columnGap":"12px","_padding":{"top":"28px","right":"40px","bottom":"28px","left":"40px"},"_cursor":"pointer","_display:tablet_portrait":"none"},"modified":1775457134,"user_id":2},{"id":"gc0019","name":"hero__scroll-arrow","settings":{"_width":"28px","_height":"28px","_alignItems":"center","_justifyContent":"center","_border":{"style":"solid","width":{"top":"1px","right":"1px","bottom":"1px","left":"1px"},"color":{"raw":"var(--border)"}},"_typography":{"font-size":"11px","color":{"raw":"var(--grey)"}}},"modified":1775456602,"user_id":2}]}
Maybe there’s a different way to achieve the same thing in a way that works better for Bricks’ editor, but either way I think this is something that needs to be addressed.
Side note: These frontend vs editor discrepancies really need to be resolved once and for all. They may be minor but they are also pretty frequent and it quickly becomes frustrating to develop or design a website if the tool can’t be trusted to display content properly. There have been many of these types of issues raised in the past, some by me and some by other users. I’m hoping the Bricks dev team can do a bit of a bug-bash session for some of these similar/recurring issues. 
I do hope this is improved in the future but I understand if I’m the odd one out on this.