Question

I’m using WordPress and a template I bought in order to build the website I’m having the problem with. The template is built to be responsive and I’m facing some problems that I no matter what I’ve tried I wasn’t able to find a way to fix them.

There are two boxes that when re-sizing the window don’t occupy all the available width.

Here’s the php code:

<div class="gb_ff social_share bold font_x_small boxed2">
                     <span class="meta_title_social">
                           <?php gb_e('Share') ?>
                     </span>
                    <?php get_template_part('inc/social-share') ?>
                </div>

            <div class="gift boxed3">
                 <span class="gift_image">
                        <img src="http://topgreekgyms.fitnessforum.gr/wp-content/uploads/2012/12/gift.png";?>
                 </span>

                 <span class="gift_title">
                        <a href="<?php gb_add_to_cart_url(); ?>" class=""><?php gb_e('Buy for friend') ?></a>
                  </span>
            </div>

and here’s the CSS

.gb_ff, h1, h2, h3, h4, h5 {
font-family: Arial;
color: #666666;
text-transform: none;
}

.social_share {
    width: auto;
    float: left;
    padding: 9px 0 0 0;
    }


.boxed2 {
    width: 300px;
    height: 65px;
    background-color: #f9f9f9;
    margin-top: 15px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-image: url(http://topgreekgyms.fitnessforum.gr/wp-content/themes/blank-child-theme/img/gradient.png);
    background-repeat: repeat-x;
    background-position: center bottom;
    border-bottom: 1px solid #CCC;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 1px 1px #7D7D7D;
    }

.gift{
    font-size: 0.6em;
    font-family: Arial;
    float:left;
    }

.boxed3 {
    width: 297px;
    height:65px;
    background-color: #f9f9f9;
    margin-top: 15px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-image: url(http://topgreekgyms.fitnessforum.gr/wp-content/themes/blank-child-theme/img/gradient.png);
    background-repeat: repeat-x;
    background-position: center bottom;
    border-bottom: 1px solid #CCC;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 1px 1px #7D7D7D;
    }

.gift_image {
    float: left;
    margin: 16px 9px;
    }

.gift_title {
    color: #666;
    font-size: 15px;
    font-family: arial;
    font-weight: bold;
    margin-left: 3px;
    margin-top: 10px;
    line-height: 66px;
    }

The boxes I’m referring to are the ones that appear under the countdown.

Answer 1

I don’t know how your css is organized, but these lines should do it (assuming it’s specific enough):

@media all and (max-width: 900px) { /* this media query rule is probably
                                       in the css already. no need to repeat it*/
   .boxed2,
   .boxed3 {
       width: 100%;
   }
}

​
If it’s the first time you’re seeing/hearing about media queries, then this might be useful: CSS Media Queries & Using Available Space