CODEWITHSUNDEEP
htmlcsswordpress
user3117275
user3117275

Reputation: 367

CSS width: inherit issue

I have a wordpress site with a widget. http://www.insidemarketblog.com/seo/bestseotoolstoimproverankings/

if you scroll down, you'll notice that the box "Are You Looking To Grow Your Business" scrolls down with you (fixed position).

Weird issue that the text box resizes, causing the text to go off the side-bar space. The css is inline as width: inherit. Why does the text break if it's inheriting from the above spacing?

HTML/CSS:

<form class="thesis_email_form" action="http://insidemarketstrategy.us8.list-manage.com/subscribe/post" method="post">
<div id="text-4_clone" class="widget widget_text q2w3-widget-clone-thesis_wp_widgets_1348079687" style="top: 0px; width: inherit; height: 289px; visibility: hidden;">  </div>
<div id="text-4" class="widget widget_text" style="position: fixed; top: 0px; width: inherit;">
<p class="widget_title">Are you looking to grow your business?</p>
<div class="textwidget">
<div id="wpcf7-f94-o1" class="wpcf7">
<div class="screen-reader-response"></div>
<form class="wpcf7-form" novalidate="novalidate" method="post" action="/seo/bestseotoolstoimproverankings/#wpcf7-f94-o1">
<div style="display: none;">
<p>
<p>
<p>
<p>
<div class="wpcf7-response-output wpcf7-display-none"></div>
</form>

Upvotes: 0

Views: 147

Answers (1)

Imran Bughio
Imran Bughio

Reputation: 4941

Sidebar is using padding with border-box to create gutter ~ means padding is counted as part of the width which is 328 although it seems like sidebar width is 278.

After you inherit the width it take 328 not 278 best solution would be to change the padding to margin like this & reduce the width to 278..

 .columns > .sidebar {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     float: right;
     margin: 25px 25px 0;
     width: 278px;
 }

Simply replace this code with the one you have on line number 98 in css.css.

Upvotes: 2

Related Questions