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?
Can you link to a live page, or at least post the relevant CSS, so we can see what’s happening?
SamA74
January 20, 2018, 3:04pm
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.
2 Likes
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}
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}
SamA74
January 20, 2018, 3:21pm
6
siddardha:
This is the complete CSS
It’s a little easier to read on Github .
1 Like
Might sound dumb, but I still couldn’t figure out what exactly to do
SamA74
January 20, 2018, 3:32pm
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">
2 Likes
I went with the second option and it worked great.
Thank you
@SamA74 @TechnoBear
1 Like
system
Closed
April 23, 2018, 1:37pm
11
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.