▼
Streaming live at 10am (PST)

Responsiveness broken when exporting code

#1

Hi,

I'am quite new to using Webflow. I know all the basics, and also basic html/css.

We don't host the code on Webflow, and therefore i export html/css, and use this on our own site. However, when using the columns grid, the code completely mess up and nothing is responsive. Therefore i have tried to combine the grid with some bootstrap, but then the bootstrap stylesheet overwrite alot of other styling settings.

So my 2 questions:

1) Can it be true that is is not possible to export the code with columns and have the real responsivness experience?
2) Possible to integrate bootstrap grids, without having the basic bootstrap styling appear (like color, font etc.)

Best,
Anders

#2

Actually, it seems to be working fine on tablet and phones, on desktop it stakes my 2 columns, instead of placing them next to each other.

Here is the code which is an my backend in our system.

HTML:





Heading


Heading

Button Text 

  <div class="w-col w-col-6">
    <div class="div-block-2">
      <h1 class="heading-4">Heading</h1>
      <h2 class="heading-3">Heading</h2><img class="img-2" src="images/homepage/GANNI_SHADES.jpg?$staticlink$"><a class="cta-button-1 w-button">Button Text</a></div>
  </div>
</div>

CSS:

.div-block-1 {
position: relative;
}

.img-1 {
max-width: 100%;
margin-top: 45px;
}

.heading-3 {
position: absolute;
margin-top: 55px;
margin-left: 15px;
color: #000;
font-size: 18px;
text-transform: uppercase;
}

.heading-4 {
position: absolute;
margin-left: 15px;
color: #000;
font-size: 45px;
text-transform: uppercase;
}

.img-2 {
max-width: 100%;
margin-top: 45px;
}

.cta-button-1 {
display: block;
width: 200px;
margin-top: 15px;
margin-right: auto;
margin-left: auto;
border: 3px solid #000;
background-color: transparent;
box-shadow: inset 0 0 0 0 #000;
-webkit-transition: box-shadow 700ms ease;
transition: box-shadow 700ms ease;
color: #000;
font-weight: 700;
text-align: center;
text-transform: uppercase;
cursor: pointer;
}

.cta-button-1:hover {
box-shadow: inset 200px 0 0 0 #000;
color: #fff;
}

.div-block-2 {
position: relative;
}

.column {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}

@media (max-width: 991px) {
.div-block-1 {
max-width: 100%;
}
.img-1 {
max-width: 100%;
}
.img-2 {
max-width: 100%;
}
.div-block-2 {
max-width: 100%;
}
}

@media (max-width: 479px) {
.img-1 {
max-width: 100%;
}
.img-2 {
max-width: 100%;
}
}

#3

Please provide link to site? Otherwise nobody can see what's going on.

#4

Hi,

Sorry.

Here is the link: http://ganni-template-2-column.webflow.io/

It looks fine in this test window, but as soon as exporting the html/css and placing it inside our cms (ecommerce) system, it completely breaks.

Do you need to know which elements i copy to our CMS?

#5

Btw. our website is 1170px wide, and it should therefore adapt to this size. Furthermore, the src set is not compatible with our CMS for some reason, and therefore the only solution is to use src=imagepath.