CODEWITHSUNDEEP
htmlcsswidget
Slurms
Slurms

Reputation: 199

Re-sizing website widgets width & height CSS

How can i change the width and height of each individual widget i've add to the bottom of my footer. http://jjabaird.virb.com/

For example, i have 3 widgets and each widget is set at 320px, i would like one of those three widgets to be 960px and another a different size.

Any help would be greatly appreciated!

Upvotes: 0

Views: 10719

Answers (3)

abbood
abbood

Reputation: 23548

in your code 

<div class="wrapper">            
        <article class="widget rss">
        </article>
        <article class="widget blank">
            <h2>Bleh</h2>
            <p>Testing Testing Testing</p>
        </article>
        <article class="widget blank">
            <h2>Bleh 2</h2>
            <p>testing testing testing</p>
        </article>            
    </div>

and css:

.wrapper { 
    max-width: 960px; 
    padding: 0; 
    margin: 0 auto;
 }

.widgets article.widget { 
    margin-bottom: 20px;
     width: 31.3%; 
    float: left; 
}

the containing div wrapper has a max width of 960px.. at the same time each widget it contains has a width of 31%.. so if you change the width of the first widget to 320px.. then the other two will bump down.. (b/c they are all set to float: left).. so what you want to do is increase the size of the first to 320px, but also adjust the sizes of the other two so that they are small enough to be contained within the wrapper div

ie the total of widths must be <= 960px.. (and you have to also take into account the widget's margins and paddings when you do your calculation)

but if you just change the width of the first widget to 320px and leave the other two.. you'll end up with (320px + .31(960) + .31(960)) > 960

hope this helps

Upvotes: 1

Pawan Lakhara
Pawan Lakhara

Reputation: 1150

try this 

.widgets article.widget {
    float: left;
    margin-bottom: 20px;
    margin-right: 15px;
    width: 310px;
}

three widgets 310*3=930 and margin-right:15px; 15*2=30 so 930+30= 960.

and third widgets give float:right;

<article class="widget blank" style="float: right;">
                <h2>Bleh 2</h2>
                <p>testing testing testing</p>

            </article>

Upvotes: 1

Bk Santiago
Bk Santiago

Reputation: 1573

Are you saying that you didn't do that website? In what i see, the width of the widget is 31.3%, and the three widgets Plus their margins make it 100%..

if you want to change it, you can override in css it by adding width: 320px !important;

Upvotes: 1

Related Questions