Objects can not be placed in the middle and made invisible in HTML

  • Resolved philippf

    (@philippf)


    5 years, 1 month ago

    Hello everybody,

    on my website I have taken an HTML code from the start page and built it into another page. In this the headline and the white bar should become invisible. In addition, the 2 (previously 3) modules should be in the middle. If I want to make the white bar now invisible, either the part on my home page is broken or it does not work (with .sing .page-19 …). Can someone help me to place the elements in the middle and remove the white bar?

    that’s my current code:

    <section class="service-section">
	
				<div class="">
			<div class="">
				<div class="">
									
								
			
		</div>
		<!-- /Section Title -->
									</div>
			</div>
								<div class="col-md-4 col-sm-6 ">
			<div class="post text-center wow flipInX animated animated" data-wow-delay=".5s" style="visibility: visible; animation-delay: 0.5s; animation-name: flipInX;">
			
								
																<figure class="post-thumbnail">	
								
																			<a href="https://philippfalkenhagen.de/tiere-2">
																		<img class="services_cols_mn_icon" src="https://philippfalkenhagen.de/wp-content/uploads/2019/07/Makro.jpg" alt="Makros" title="Makros" scale="0">
																			</a>
																									</figure>
										
								
								
										<a href="https://philippfalkenhagen.de/tiere-2">
														
								<div class="entry-header">
								<h4 class="entry-title">Makros</h4>
								</div>
													</a>
										
																	
											
							<div class="entry-content">
							<p>Insekten und Pflanzen, die mit dem blo?en Auge oft unscheinbar wirken und gerne übersehen werden, sind bei n?herer Betrachtung viel faszinierender als man denkt. Hier finden sie meine Makrofotografien.</p>
							</div>
			
							
									</div>
			</div>
								<div class="col-md-4 col-sm-6 col-xs-12">
			<div class="post text-center wow flipInX animated animated" data-wow-delay=".5s" style="visibility: visible; animation-delay: 0.5s; animation-name: flipInX;">
			
								
																<figure class="post-thumbnail">	
								
																			<a href="https://philippfalkenhagen.de/tiere-2">
																		<img class="services_cols_mn_icon" src="https://philippfalkenhagen.de/wp-content/uploads/2019/07/Landschaften.jpg" alt="Landschaften" title="Landschaften" scale="0">
																			</a>
																									</figure>
										
								
								
										<a href="https://philippfalkenhagen.de/tiere-2">
														
								<div class="entry-header">
								<h4 class="entry-title">Landschaften</h4>
								</div>
													</a>
										
																	
											
							<div class="entry-content">
							<p>Ein feuerroter Sonnenuntergang, die Elblandschaft oder die atemberaubende Fjorde Norwegens. Hier finden Sie Fotografien von Landschaften, Sonnenunterg?ngen und Wetterph?nomenen.</p>
							</div>
			
							
									</div>
			</div>
				</div><!-- /.row --><div class="row"></div>		
			</div>
</section>

    Thank you very much

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • The .service-section div is producing the white bar from your
    https://philippfalkenhagen.de/wp-content/themes/spicepress/style.css line 600:
    .service-section { background-color: #ffffff; border-bottom: 1px solid #e8e8e8; padding: 70px 0 30px; }

    Quick fix would be changing the background colour to:
    background-color: transparent;
    assuming it’s not used anywhere else on the site.

    Instead of centering those 2 columns, you could change col-md-4 to col-md-6:
    <div class="col-md-4 col-sm-6 col-xs-12">
    and that way they’ll take up half the width each.
    6 – 6

    Or you could add an empty div before the two columns.
    <div class="col-md-2 col-sm-6 col-xs-12 ">&nbsp;</div>
    So it would go:
    2 – 4 – 4
    That should center them.

    Hope that helps!

    Thread Starter philippf

    (@philippf)

    Thanks a lot! It worked!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Objects can not be placed in the middle and made invisible in HTML’ is closed to new replies.