adding row and cols for div

Sparkling
1

Hello

I’m working on a home page how can I make a row with 3 divs cols
Many Thanks
David

2

Hello there,

I hope you are doing well today.

The following plugin can be used to add columns to the pages:

As it goes for the homepage, it was not designed to use columns so in order to add them you would need a developer to change the theme’s code. You can use the following link to contact a developer:

https://colorlib.com/out/envatostudio

Best Regards,
Support

3

Hello
I already created my own homepage just wanted to know if the theme had a css style for rows and cols.
if not is it ok to add bootstrap rows and cols to the css?
many thanks
David

4

ok so I manage to do it here the code incase anyone else whats to do the same thing

CSS

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; border: 1px solid #DADADA; border-radius: 4px; margin-bottom: 20px; display: block; padding: 30px;}
.span_2_of_3 { width: 66.13%; border: 1px solid #DADADA; border-radius: 4px; margin-bottom: 20px; display: block; padding: 30px;}
.span_1_of_3 { width: 32.26%; border: 1px solid #DADADA; border-radius: 4px; margin-bottom: 20px; display: block; padding: 30px;}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}

Divs

<div class="section group">
	<div class="col span_1_of_3">
	<?php if ( is_active_sidebar( 'horizontal-sidebar' ) ) : ?>

			<?php dynamic_sidebar( 'horizontal-sidebar' ); ?>

	<?php endif; ?>
	</div>
	<div class="col span_1_of_3">
	This is column 2
	</div>
	<div class="col span_1_of_3">
	This is column 3
	</div>
</div>

Hope it may help others
Many Thanks
David

5

HI,David
Could you help me do the homepage two post preview in one row ?
I need you help.

Many Thanks.

6

Hey there

@David - thank you for sharing solution
@pitpot - your question is similar to David’s question, it needs major modification of the theme structure and style if you don’t have enough experience you have to hire someone, or, you can use solution by David,

7

Hi @pitpot

The code above is one row do you mean two cols one row if so then do this

CSS

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF one  */
.span_2_of_3 { width: 50%; border: 1px solid #DADADA; border-radius: 4px; margin-bottom: 20px; display: block; padding: 30px;}
.span_1_of_3 { width: 50%; border: 1px solid #DADADA; border-radius: 4px; margin-bottom: 20px; display: block; padding: 30px;}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_3 { width: 50%; }
        .span_2_of_3 { width: 50%; border: 1px solid #DADADA; border-radius: 4px; margin-bottom: 20px; display: block; padding: 30px;}
}

Div

<div class="section group">
	<div class="col span_1_of_3">
post preview 1
	</div>
	<div class="col span_1_of_2">
post preview 2
	</div>
</div>
8

HI David
Many thanks your help,
The DIV how to add in the index.php file?i try edit many time,the result is not correct
i know…my PHP/progam skill too bad =.=

please advise/help.
Many Thanks.

9

Sorry @pitpot that a bit out of my dept sorry

10

Hi @pitpot ,

As stated before, it would be best to use a third party developer to make these changes. Please have a look at the following link to contact one:

https://colorlib.com/out/envatostudio

Take care.

11

Dear all

Many thanks ,help a lot i will try do myself and consider the envatostudio service.

Thanks

12

Hello @pitpot,

I am sorry for the inconvenience caused here.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support