Issues with using css framework


#1

I am beginner and started using the lit css from here https://ajusa.github.io/lit/

Expected the columns to come up side by side as shown on the page, but spaces came up when I used the following code:

Tried reducing the image size, didn't work

<div class="card row">
                
                    <img class="col" src="static/siteground.png" width="300" height="200">
                           
                            <div class="col"> <h4>SiteGround Hosting</h4>
            <p>Bla Bla Bla</p>
            <a class="btn primary" href="https://siteground.com" target="_blank">Learn More</a>
            </div>
        </div>

How do I remove the spaces and make the image and content come up side by side?


#2

Can you link to a live page, or at least post the relevant CSS, so we can see what's happening?


#3

The framework applies the display values table and table-cell to the classes .row and .col respectively.
You will need to adjust the vertical-align property for the cells from their default setting, probably to top or middle as you prefer.


#4

This is the complete CSS

*{box-sizing:border-box;margin:.5em 0}@media(min-width:35em){.col{display:table-cell}.\31{width:5%}.\33{width:22%}.\34{width:30%}.\35{width:40%}.\32{width:15%}.row{display:table;border-spacing:1em 0}}.row,.w-100{width:100%}.card:focus,hr{outline:0;border:solid #fa0}.card,pre{padding:1em;border:solid #eee}.btn:hover,a:hover{opacity:.6}.c{max-width:60em;padding:1em;margin:auto;font:1em/1.6 nunito}h6{font:300 1em nunito}h5{font:300 1.2em nunito}h3{font:300 2em nunito}h4{font:300 1.5em nunito}h2{font:300 2.2em nunito}h1{font:300 2.5em nunito}a{color:#fa0;text-decoration:none}.btn.primary{color:#fff;background:#fa0;border:solid #fa0}pre{overflow:auto}td,th{padding:1em;text-align:left;border-bottom:solid #eee}.btn{padding:1em;letter-spacing:.1em;text-transform:uppercase;background:0 0;border:solid;font:.7em nunito}

#5

I did not find the vertical-align propery
Can you help point out which value to change in the following CSS code??

*{box-sizing:border-box;margin:.5em 0}@media(min-width:35em){.col{display:table-cell}.\31{width:5%}.\33{width:22%}.\34{width:30%}.\35{width:40%}.\32{width:15%}.row{display:table;border-spacing:1em 0}}.row,.w-100{width:100%}.card:focus,hr{outline:0;border:solid #fa0}.card,pre{padding:1em;border:solid #eee}.btn:hover,a:hover{opacity:.6}.c{max-width:60em;padding:1em;margin:auto;font:1em/1.6 nunito}h6{font:300 1em nunito}h5{font:300 1.2em nunito}h3{font:300 2em nunito}h4{font:300 1.5em nunito}h2{font:300 2.2em nunito}h1{font:300 2.5em nunito}a{color:#fa0;text-decoration:none}.btn.primary{color:#fff;background:#fa0;border:solid #fa0}pre{overflow:auto}td,th{padding:1em;text-align:left;border-bottom:solid #eee}.btn{padding:1em;letter-spacing:.1em;text-transform:uppercase;background:0 0;border:solid;font:.7em nunito}

#6

It's a little easier to read on Github.


#7

Might sound dumb, but I still couldn't figure out what exactly to do


#8

You won't find it, that is the problem, it's using the default value for that property which I think is baseline.
I'm not one for using frameworks, but I think it is usual practice to put any customisations into a separate css, so as not to "muddy" the original. That should help you not break it and make updates easier.

Two ways: you could add a rule:-

.col {
    vertical-align: top; /* or middle if you like */
}

But modifying the frameworks class may break how it works, so the alternative is a new class, called whatever you like:-

.v-top {
    vertical-align: top;
}

Which would require the class adding to the html also.

<div class="col v-top">

#9

I went with the second option and it worked great.


Thank you @SamA74 @TechnoBear


closed #11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.