Divs not removing floats - CSS - html

Question

I am working on a web site.
On min-width: 769px and max width of 1203px I was trying to remove the float for two divs so I can make it a full width option for both divs is:
Since I am using a page builder I tried to use my inspector tool on Chrome and search for appropriate classes or div that can do the trick and I pull the ff codes:
#media (min-width: 769px) and (max-width: 1203px){
.pbuilder_column_inner.pbuilder_droppable{
width: 100%;
display:block;
float: none;
}
}
But for some reason it doesn't do the trick. Am I doing it wrong?

Answer 1

Hi just remove width: 50% in or replace it with 100% instead:
.pbuilder_column.pbuilder_column-1-2{
width: 100%;
}

Answer 2

The following CSS properties:
float:none;
width:100%;
on the divs which classes are pbuilder_column pbuilder_column-1-2 (in the hierarchy, they are right below pbuilder_row_colwrapper ).
So, the code would be:
#media (min-width: 769px) and (max-width: 1203px){
.pbuilder_column{
float:none;
width:100%;
}
}
It does the trick, from my inspector at least.

Answer 3

Just use the class .pbuilder_column instead of .pbuilder_column_inner.pbuilder_droppable.

Answer 4

body,
#pbtheme_wrapper{
overflow-y: visible !important;
}
.pbuilder_column.pbuilder_column-1-2{
width: 100% !important;
}

Answer 5

You have to add below css:
#media screen and (min-width: 769px) and (max-width: 1203px){
.pbuilder_row_colwrapper .pbuilder_column {
float: none;
display: block;
width: 100%;
}
}

Answer 6

To me the real problem comes from the way you add your paddings to your elements. By removing or adjusting a lot of them, I was able to achieve it and increase the responsiveness (try to play around margin more than padding in some situations)
The main thing here, is not that your field aren't taking 100% of the container space, it's your button that overflows the container because of a 170px padding (with a !important, which is something I really don't recommend) so it seems like divs aren't taking the right amount of space.