Page 1 of 1

I need educational on span css

Posted: Wed Sep 11, 2019 9:23 pm
by shaibustephen
I am customizing my article category. I want an instance where it creates only two columns up and three columns down.
The three down columns should be of equal size but the top two columns should be at a ratio 30/70 peent width.
How do I achieve this using span?
The column should collapse if there is nothing in it to avoid empty blank space

Re: I need educational on span css

Posted: Thu Sep 12, 2019 7:58 am
by waarnemer
you don't by using span..

https://www.w3schools.com/tags/tag_span.asp

you use div

https://www.w3schools.com/tags/tag_div.asp

but maybe better to look at https://www.w3schools.com/html/html5_new_elements.asp for structural elements..

then check https://www.w3schools.com/css/css3_flexbox.asp on how to arrange all elements

Re: I need educational on span css

Posted: Fri Sep 13, 2019 11:21 pm
by shaibustephen
I am not too knowledgeable on using css. How do i use flex on the sample url you sent to me to get the below screen shot on my custom article category?
Screenshot.jpg

Re: I need educational on span css

Posted: Sat Sep 14, 2019 8:09 am
by Per Yngve Berg
Do you use Bootstrap in your template and which version?

There is Bootstrap version 2, 3 and 4

https://getbootstrap.com/2.3.2/

Re: I need educational on span css

Posted: Thu Sep 26, 2019 12:09 am
by shaibustephen
i am using bootstrap.4.3.1. How do i use this span as it doesn't have such css? what is the preferable way to get this done?

Re: I need educational on span css

Posted: Thu Sep 26, 2019 11:34 am
by Findozor
use bootstrap classes

Re: I need educational on span css

Posted: Thu Sep 26, 2019 1:43 pm
by Per Yngve Berg
Bootstrap 4.3 does not have the span anymore. The syntax have changed. It's col-xx-yy.

https://getbootstrap.com/docs/4.3/layout/grid/

Re: I need educational on span css

Posted: Sat Sep 28, 2019 8:47 pm
by helpwithjoomla
Here's how you would do the code with bootstrap 4 and div's:

<div class="container">
<div class="row">
<div class="col-4">
1/3 of the container
</div>
<div class="col-8">
2/3 of the container
</div>
</div>

<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>

The class "col" is what divides each row horizontally. Since there are 12 columns, you divide the first row into 4 columns and 8 columns. The second row results in 3 equal columns (4-4-4).