Support » Fixing WordPress » Objects can not be placed in the middle and made invisible in HTML

  • Resolved philippf

    (@philippf)


    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!

    Thanks a lot! It worked!

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.