Results 1 to 3 of 3

Thread: css section elements to appear under each other on mobile

  1. #1
    Join Date
    May 2012
    Posts
    210
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default css section elements to appear under each other on mobile

    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

  2. #2
    Join Date
    Jan 2009
    Location
    NH
    Posts
    622
    Thanks
    96
    Thanked 24 Times in 24 Posts

    Default

    Can you post the html and css you tried?

  3. #3
    Join Date
    May 2012
    Posts
    210
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Sorry yeah is below is the html

    Code:
    <!-- 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

    Code:
    .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
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	mobile-issue.jpg 
Views:	23 
Size:	39.8 KB 
ID:	6177  

Similar Threads

  1. Replies: 0
    Last Post: 03-02-2014, 11:59 AM
  2. Replies: 2
    Last Post: 08-17-2010, 03:22 AM
  3. Adding Elements to Arrays - elements lost
    By Henamot in forum Flash
    Replies: 0
    Last Post: 03-19-2009, 10:30 AM
  4. Blog section , Forums section - business
    By deepakdeep in forum Graphics
    Replies: 0
    Last Post: 11-25-2006, 09:21 AM
  5. Switch menu: switchable section inside switchable section?
    By GranoSalis in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 11-26-2005, 06:13 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •