CODEWITHSUNDEEP
css
kat_indo
kat_indo

Reputation: 422

How can I set the width of the div to occupy the whole space when the resolution changes?

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.

Upvotes: 0

Views: 4226

Answers (3)

Slavenko Miljic
Slavenko Miljic

Reputation: 3856

CSS media queries are used to apply certain styles for desired screen/window resolutions. for example all your media queries i your theme are found in style-media-queries.css file.

Add this to your css

@media (max-width: 900px) {
   #boxed2, #boxed3{
     width:auto;
     float:none;
   }


}

You can read more about media queries here

Upvotes: 1

Paulo R.
Paulo R.

Reputation: 15619

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

Upvotes: 2

Billy Moat
Billy Moat

Reputation: 21050

In your desired media queries CSS set the width of those elements to be width:100% when the resolution is at a certain size.

The media queries are already there - you simply have to add a css rule for these elments in there.

Upvotes: 1

Related Questions