Issue #5381Opened September 12, 2023by sammrafi0 reactions
BUG: Duplicate CSS
Question
GrapesJS version
- I confirm to use the latest version of GrapesJS
What browser are you using?
116.0.5845.187 (Official Build) (64-bit)
Reproducible demo link
https://jsfiddle.net/bw4Lxp6c/
Describe the bug
How to reproduce the bug? When I add a column it generates duplicate CSS in @media (max-width: 768px)
What is the expected behavior? The CSS code should be generated once.
What is the current behavior? Duplicating CSS code in @media (max-width: 768px)
If is necessary to execute some code in order to reproduce the bug, paste it here below:
<div temporary="">
<div>
</div>
</div>
<div class="row">
<div class="cell">
<section class="bdg-sect">
<h1 class="heading">Insert title here
</h1>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
</section>
</div>
<div class="cell">
<img src="/media/images/service_images/Home_page.png" class="c2666"/>
</div>
</div>
<style>* {
box-sizing: border-box;
}
body {
margin: 0;
}
.row{
display:flex;
justify-content:flex-start;
align-items:stretch;
flex-wrap:nowrap;
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
}
.cell{
min-height:75px;
flex-grow:1;
flex-basis:100%;
}
*{
box-sizing:border-box;
}
body{
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
}
.c2666{
color:black;
width:567px;
height:403px;
}
@media (max-width: 768px){
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
.row{
flex-wrap:wrap;
}
}
</style>
Code of Conduct
- I agree to follow this project's Code of Conduct
Answers (0)
No answers yet.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #4323
BUG: Performance issue while dragging component to canvas when you have 2k component on canvas
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Google Chrome Version 101.0.4951.41 (Officia...
3 answersUpdated June 19, 2025
Issue #5173
BUG: editor.Css.setRule API not working as expected, it is not updating the rule existing rule.
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Version 112.0.5615.137 (Official Build) (a...
2 answersUpdated June 15, 2023
Issue #5689
BUG: <> is introduced at the beginning editor.getHtml()
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome Version 121.0.6167.185 (Official Buil...
3 answersUpdated February 21, 2024
Issue #5424
BUG: `component:styleUpdate` event is not fired
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome 116.0.5845.187Reproducible demo link...
1 answersUpdated October 10, 2023
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.