css section elements to appear under each other on mobile

[ianhaney]

Hi

I am trying to get section elements to appear under each other on mobiles but can't seem to do it, all I can think is because it's using position: relative and got padding

I did adjust the padding to 2200px but then the next section element did not appear for miles down the screen on mobile, is there a way so that when one section ends, the next section elements appears directly under the above section element with maybe a little gap of 10px for example

Thank you in advance

[mlegg]

Can you post the html and css you tried?

[ianhaney]

Sorry yeah is below is the html

<!-- services -->
		<section id="services" class="section wow fadeInUp">
			<div class="container">	
			
				<div class="section-heading">
					<h2>Loan Services</h2>
					<div class="separator"></div>	
				</div>
				
				<div class="row">
					<div class="col-md-4 col-sm-4">
						<div class="services style2">
                            <i class="fa fa-info circle" aria-hidden="true"></i>
							<h4>Secured Loans</h4>
							<p>&nbsp;
							
                            </p>
						</div>
					</div>
                    
                    <div class="col-md-4 col-sm-4">
						<div class="services style2">
                            <i class="fa fa-info circle" aria-hidden="true"></i>
							<h4>Unsecured Loans</h4>
							<p>&nbsp;
							
                            </p>
						</div>
					</div>
                    
					<div class="col-md-4 col-sm-4">
						<div class="services style2">
							<i class="fa fa-info circle" aria-hidden="true"></i>
							<h4>Loans for Bad Credit</h4>
							<p>&nbsp;
                            
                            </p>
						</div>
					</div>
                    
					<div class="col-md-4 col-sm-4">
						<div class="services style2">
							<i class="fa fa-info circle" aria-hidden="true"></i>
							<h4>Car Finance</h4>
							<p>&nbsp;
                            
                            </p>
						</div>
					</div>
                    
                    <div class="col-md-4 col-sm-4">
						<div class="services style2">
							<i class="fa fa-info circle" aria-hidden="true"></i>
							<h4>Mortgages</h4>
							<p>&nbsp;
                            
                            </p>
						</div>
					</div>
                    
                    <div class="col-md-4 col-sm-4">
						<div class="services style2">
							<i class="fa fa-info circle" aria-hidden="true"></i>
							<h4>Credit Cards</h4>
							<p>&nbsp;
                            
                            </p>
						</div>
					</div>
                    
				</div><!-- ./row -->
			</div>
		</section>
		<!-- ./services -->

below is the css

.section: position: relative;
padding: 2000px 0 80px;

I have also attached a screenshot of the issue, for now I have taken out the padding but it overlaps the section above, see the circle overlapping on car finance and also the text loan services under the apply button on loans for bad credit