CODEWITHSUNDEEP
htmlcss
user3117275
user3117275

Reputation: 367

CSS - Responsive Issue

I'll try to make this as simple as possible. You can see the problem at http://www.insidemarketblog.com (you can see issue on resize)

When you resize the page so that the sidebar elements go to the bottom (as soon as sidebar goes to bottom), you'll notice that the email form with blue header that says "Grow Your Business" floats to the right and does NOT resize to 100%. How can I fix it to float to left and resize to 100%?

Here is the code:

HTML:

<div id="text-2" class="widget widget_text" style="">
<p class="widget_title">Grow Your Business</p>
<div class="textwidget">
<div id="wpcf7-f94-o1" class="wpcf7">
<form class="wpcf7-form" novalidate="novalidate" method="post" action="/#wpcf7-f94-o1">
</div>
</div>
</div>

And here is my best attempt to place all the relevant CSS code (but this might be incomplete b/c it's the responsive CSS.

.columns > .sidebar > *:nth-child(2n+2) {
  clear: none;
  float: right;
}
.columns > .sidebar > * {
  width: 240px;
}
.columns > .sidebar > * {
  clear: both;
  float: left;
  width: 46.15%;
}

Here's a screenshot of how it looks (and why it's clearly wrong).

enter image description here

Upvotes: 0

Views: 81

Answers (2)

KittMedia
KittMedia

Reputation: 7466

Your CSS says that it should be floated to the right so it does exactly what the code says. See your third line in the CSS you've posted: You should delete the floats of #text-3 and #text-2 in the responsive layout and it will work.

Upvotes: 1

Jake 404
Jake 404

Reputation: 171

Add this to your code:

@media (max-width: 984px){
    .columns > .sidebar > * {
        clear: both;
        float: left;
        width: 100%;
    }
}

Upvotes: 2

Related Questions