i have this website http://steam-to-rent.ch/ and what i need is to align the entire content on the left (same line as the Logo). I'm using bootstrap grid but in the homepage and here http://steam-to-rent.ch/uber.html i can't align on the left. This is the HTML code:
<section id="services" class="section text-center home">
<div class="container">
<div class="row">
<!-- SINGLE SERVICE -->
<div class="col-sm-12">
<div class="single-service text-left wow fadeInRight" data-wow-duration="1s" data-wow-delay=".6s">
<div class="service-content home">
<h3 class="">Dampf wird überall gebraucht! </h3>
<h4>Damit es wieder mit Volldampf voraus gehen kann</h4>
<p>Die Einsatzgebiete für Dampf sind vielfältig. Sei es im Spital, der Universitätskantine, der Molkerei, der Wäscherei, der Lederverarbeitung, der Gummiherstellung, in der gesamten Lebensmittelindustrie, beim Gemüsebauer um Randen und Mais zu kochen, in der Futtermühle, der Getreidemühle oder in der Käserei. Mit unserer <b>Dampfkessel - Vermietung</b> helfen wir Ihnen schnell und kompetent bei Ausfällen, damit Sie Ihre Prozesse zügig wieder aufnehmen können.
</p>
</div>
</div>
</div>
<!-- END SINGLE SERVICE -->
</div>
<!--.row-->
</div>
<!--/.container -->
</section>
Just remove the margin you have given in your css
.single-service {
margin:30px 25px;
}
.service-content {
margin:65px;
}
Remove div's holding col-sm-12 and service-content classes from your HTML page
col-sm-12 is having 15px padding
and
.service-content {
margin-left: 65px; /* because of this 65px your content is shifted to left, so remove this value or avoid using this class in HTML */
bottom: 0;
}
Related
I'm working with flexbox when the screen size is larger than mobile.
What I would like to do is add a scroll effect only to the right side of the page content, so that you can always see "Impressum", but you can only scroll down the larger text part on the right side.
How can this be achieved?
import Link from 'next/link'
import React from 'react'
const impressum = () => {
return (
<div className='pl-4 md:flex md:justify-evenly md:items-start'>
{/* left side */}
<div className='pt-14 pb-20 text-3xl md:text-5xl'>
<h2>Impressum</h2>
</div>
{/* right side */}
<div className='md:pt-16'>
{/* company informations */}
<div>
<h2 className='text-bold md:text-xl'>SPOT GMBH</h2>
<ul>
<li>Segantinistrasse 194</li>
<li>9049 Zürich</li>
<li>Schweiz</li>
</ul>
<div className='flex flex-col text-blue-700 hover:text-blue-800 underline'>
<input type="phone" value="+41 79873 37 81" readOnly />
<input type="email" value="hello#spoton.ch" readOnly/>
</div>
<div className='py-6'>
<Link href="https://spoton.ch/">
<a className='text-blue-700 hover:text-blue-800 underline'><p>https://spoton.ch/</p></a>
</Link>
</div>
<div className='space-y-6'>
<p>Vertretungsberechtigte Personen: Lena Schwerzmann</p>
<p>Eingetragener Firmenname: Spot GmbH</p>
<p>Registernummer: CH-020.4.072.388-5</p>
<p>Handelsregisteramt: Zürich</p>
<p>Konzept, Design & Programmierung: <Link href="https://www.geyst.ch/"><a className='text-blue-700 underline hover:text-blue-800'>geyst.ch</a></Link></p>
<p className='text-sm md:text-xl'>Haftungsausschluss</p>
</div>
</div>
<div className='max-w-md'>
<div className='space-y-4'>
<p>Der Autor übernimmt keinerlei Gewähr hinsichtlich der inhaltlichen Richtigkeit, Genauigkeit, Aktualität, Zuverlässigkeit und Vollständigkeit der Informationen.</p>
<p>Haftungsansprüche gegen den Autor wegen Schäden materieller oder immaterieller Art, welche aus dem Zugriff oder der Nutzung bzw. Nichtnutzung der veröffentlichten Informationen, durch Missbrauch der Verbindung oder durch technische Störungen entstanden sind, werden ausgeschlossen.</p>
<p>Alle Angebote sind unverbindlich. Der Autor behält es sich ausdrücklich vor, Teile der Seiten oder das gesamte Angebot ohne gesonderte Ankündigung zu verändern, zu ergänzen, zu löschen oder die Veröffentlichung zeitweise oder endgültig einzustellen.</p>
</div>
<div className='py-4 text-sm md:text-xl'>
<p>Haftung für Links</p>
</div>
<div>
<p>Verweise und Links auf Webseiten Dritter liegen ausserhalb unseres Verantwortungsbereichs. Es wird jegliche Verantwortung für solche Webseiten abgelehnt. Der Zugriff und die Nutzung solcher Webseiten erfolgen auf eigene Gefahr des Nutzers oder der Nutzerin.</p>
</div>
<div className='py-4 text-sm md:text-xl'>
<p>urheberrecht</p>
</div>
<div>
<p>Die Urheber- und alle anderen Rechte an Inhalten, Bildern, Fotos oder anderen Dateien auf der Website gehören ausschliesslich der Firma Geyst oder den speziell genannten Rechtsinhabern. Für die Reproduktion jeglicher Elemente ist die schriftliche Zustimmung der Urheberrechtsträger im Voraus einzuholen.</p>
</div>
<div className='py-4 text-sm md:text-xl'>
<p>Datenschutz</p>
</div>
<div>
<p>Gestützt auf Artikel 13 der schweizerischen Bundesverfassung und die datenschutzrechtlichen Bestimmungen des Bundes (Datenschutzgesetz, DSG) hat jede Person Anspruch auf Schutz ihrer Privatsphäre sowie auf Schutz vor Missbrauch ihrer persönlichen Daten. Wir halten diese Bestimmungen ein. Persönliche Daten werden streng vertraulich behandelt und weder an Dritte verkauft noch weitergegeben. In enger Zusammenarbeit mit unseren Hosting-Providern bemühen wir uns, die Datenbanken so gut wie möglich vor fremden Zugriffen, Verlusten, Missbrauch oder vor Fälschung zu schützen. Beim Zugriff auf unsere Webseiten werden folgende Daten in Logfiles gespeichert: IP-Adresse, Datum, Uhrzeit, Browser-Anfrage und allg. übertragene Informationen zum Betriebssystem resp. Browser. Diese Nutzungsdaten bilden die Basis für statistische, anonyme Auswertungen, so dass Trends erkennbar sind, anhand derer wir unsere Angebote entsprechend verbessern können.</p>
</div>
<div className='py-4'>
<p>Hier geht es zu unserer <Link href="#"><a className='text-blue-700 hover:text-blue-800 underline'>Datenschutzerklärung</a></Link>.</p>
</div>
</div>
</div>
</div>
)
}
export default impressum
Try this code
import Link from "next/link";
import React from "react";
const impressum = () => {
return (
<div className="pl-4 md:flex md:justify-evenly md:items-start">
{/* left side */}
<div className="pt-14 pb-20 text-3xl md:text-5xl">
<h2>Impressum</h2>
</div>
{/* right side */}
<div className="md:pt-16 h-[80vh] md:h-screen overflow-scroll">
{/* company informations */}
<div>
<h2 className="text-bold md:text-xl">SPOT GMBH</h2>
<ul>
<li>Segantinistrasse 194</li>
<li>9049 Zürich</li>
<li>Schweiz</li>
</ul>
<div className="flex flex-col text-blue-700 hover:text-blue-800 underline">
<input type="phone" value="+41 79873 37 81" readOnly />
<input type="email" value="hello#spoton.ch" readOnly />
</div>
<div className="py-6">
<Link href="https://spoton.ch/">
<a className="text-blue-700 hover:text-blue-800 underline">
<p>https://spoton.ch/</p>
</a>
</Link>
</div>
<div className="space-y-6">
<p>Vertretungsberechtigte Personen: Lena Schwerzmann</p>
<p>Eingetragener Firmenname: Spot GmbH</p>
<p>Registernummer: CH-020.4.072.388-5</p>
<p>Handelsregisteramt: Zürich</p>
<p>
Konzept, Design & Programmierung:{" "}
<Link href="https://www.geyst.ch/">
<a className="text-blue-700 underline hover:text-blue-800">
geyst.ch
</a>
</Link>
</p>
<p className="text-sm md:text-xl">Haftungsausschluss</p>
</div>
</div>
<div className="max-w-md ">
<div className="space-y-4">
<p>
Der Autor übernimmt keinerlei Gewähr hinsichtlich der inhaltlichen
Richtigkeit, Genauigkeit, Aktualität, Zuverlässigkeit und
Vollständigkeit der Informationen.
</p>
<p>
Haftungsansprüche gegen den Autor wegen Schäden materieller oder
immaterieller Art, welche aus dem Zugriff oder der Nutzung bzw.
Nichtnutzung der veröffentlichten Informationen, durch Missbrauch
der Verbindung oder durch technische Störungen entstanden sind,
werden ausgeschlossen.
</p>
<p>
Alle Angebote sind unverbindlich. Der Autor behält es sich
ausdrücklich vor, Teile der Seiten oder das gesamte Angebot ohne
gesonderte Ankündigung zu verändern, zu ergänzen, zu löschen oder
die Veröffentlichung zeitweise oder endgültig einzustellen.
</p>
</div>
<div className="py-4 text-sm md:text-xl">
<p>Haftung für Links</p>
</div>
<div>
<p>
Verweise und Links auf Webseiten Dritter liegen ausserhalb unseres
Verantwortungsbereichs. Es wird jegliche Verantwortung für solche
Webseiten abgelehnt. Der Zugriff und die Nutzung solcher Webseiten
erfolgen auf eigene Gefahr des Nutzers oder der Nutzerin.
</p>
</div>
<div className="py-4 text-sm md:text-xl">
<p>urheberrecht</p>
</div>
<div>
<p>
Die Urheber- und alle anderen Rechte an Inhalten, Bildern, Fotos
oder anderen Dateien auf der Website gehören ausschliesslich der
Firma Geyst oder den speziell genannten Rechtsinhabern. Für die
Reproduktion jeglicher Elemente ist die schriftliche Zustimmung
der Urheberrechtsträger im Voraus einzuholen.
</p>
</div>
<div className="py-4 text-sm md:text-xl">
<p>Datenschutz</p>
</div>
<div>
<p>
Gestützt auf Artikel 13 der schweizerischen Bundesverfassung und
die datenschutzrechtlichen Bestimmungen des Bundes
(Datenschutzgesetz, DSG) hat jede Person Anspruch auf Schutz ihrer
Privatsphäre sowie auf Schutz vor Missbrauch ihrer persönlichen
Daten. Wir halten diese Bestimmungen ein. Persönliche Daten werden
streng vertraulich behandelt und weder an Dritte verkauft noch
weitergegeben. In enger Zusammenarbeit mit unseren
Hosting-Providern bemühen wir uns, die Datenbanken so gut wie
möglich vor fremden Zugriffen, Verlusten, Missbrauch oder vor
Fälschung zu schützen. Beim Zugriff auf unsere Webseiten werden
folgende Daten in Logfiles gespeichert: IP-Adresse, Datum,
Uhrzeit, Browser-Anfrage und allg. übertragene Informationen zum
Betriebssystem resp. Browser. Diese Nutzungsdaten bilden die Basis
für statistische, anonyme Auswertungen, so dass Trends erkennbar
sind, anhand derer wir unsere Angebote entsprechend verbessern
können.
</p>
</div>
<div className="py-4">
<p>
Hier geht es zu unserer{" "}
<Link href="#">
<a className="text-blue-700 hover:text-blue-800 underline">
Datenschutzerklärung
</a>
</Link>
.
</p>
</div>
</div>
</div>
</div>
);
};
export default impressum;
I'm using materialize for my project, and I'm having a few problems with horizontal cards. The image I'm using has a height smaller than it's parent div so at the end of it, the background color is shown(problem image). I have tried to use max-width: 100% and max-height: 100% and nothing, also I tried to put the image as background-image in CSS instead of the img tag, but materialize hide the image if it doesn't detect the tag (problem with backgroung-image)
I know i should stretch an image, but its only a few px. And why i want to do this? bc it is ok if someone with a big screen sees it, but if i try to use a smaller screen, the text column on the right get taller, and the image stop covering the hole height of the row. This is what i want (image: how it should be)
Thanks for your time even if you didn't repy. Cheers from Chile.
Html code
<div class="col s12 m6 l4 offset-m3 options">
<div class="card">
<div class="topTitleCard"><h5 class="" >Opción 3 |</p></div>
<div class="card-image">
<img src="./content/araucaria_v2.jpg">
<div class="card-title">
<h4 class="white-text textShadow thicker-font">Viajando en el Bosque Milenario</h4>
</div>
<a rel="addtoCart" class="option3 btn-floating btn-large halfway-fab waves-effect waves-light mygreen" ><i class="material-icons">shopping_cart</i></a>
</div>
<div class="card-content">
<br>
<p>
Escoge el mirador que más te llene de paz, para que el día de mañana, puedán esparcir tus cenizas en el lugar que tu escogiste. Obten calma por siempre con el sonido del agua corriendo, o por el sonido de las copas de las Araucarias y Coihues moviendose por el viento.
Ver más...
</p>
</div>
<div>
<div class="card-tabs">
<h6 class="text-mygreen center-align">Ven y escoge tu vista para la eternidad:</h6>
<br>
<ul class="tabs tabs-fixed-width">
<li class="tab"><a class="whichTree active" value="1" href="#test3-1" style="color:#0F0F0F;">Mirador</a></li>
</ul>
</div>
<div class="card-content mygreen white-text myTabsCards">
<div id="test3-1">
<p>10 UF</p>
<a class="option3 waves-effect waves-light btn buyBtn" rel="addtoCart">Comprar</a>
</div>
<div class="bottomTabsPrices">
*precios validos hasta el 31/12/2019
</div>
</div>
</div>
</div>
</div>
CSS code (don't think is going to be useful, but here it's anyway):
.card-image{
margin-top:50px !important;
position: relative;
background-color: rgba(84,115,93,.5);
}
.card-image img{
max-width: 100%;
max-height:100%;
}
On your image put this css
width: 100%;
height: 100%;
object-fit:cover;
When using object-fit on image, you need to give it width and height properties. It won't work with max-width and max-height if width and height are not specified too.
It will always fill the parent of an image. It might cut it on sides but this depends of aspect ratio of image and parent.
How do I align my 3 buttons horizontal side by side? I think it looks bad as it is now.
class= btn btn-danger
How do I write the css for that?
my code
<div class="row">
<div class="col-sm-4">
<h3>Stationær & bærbar reparationer</h3>
<p>Vi kan udskifte alle typer hardware de mest almindelige reparationer omfatter</p>
LÆS MERE
</div>
<div class="col-sm-4">
<h3>Fjernelse af virus</h3>
<p>Hvis din computer er inficeret med virus kan vi hjælpe dig med at rense ud i dit system. Vi kan herudover også hjælpe dig med at sikre dit system mod kommende virus angreb.</p>
LÆS MERE
</div>
<div class="col-sm-4">
<h3>Data recovery</h3>
<p>Hvis din harddisk er defekt skifter vi den billigt og hurtigt, vi kan genskabe dine data tilbage i de fleste tilfælde. eller hvis Windows er gået ned, kan vi også redde din data. </p>
LÆS MERE
</div>
</div>
</div>
Two options.
Add css to give h3 and p element fixed height (adjust numbers)
.col-sm-4 p {
height: 200px;
}
.col-sm-4 h3 {
height: 50px;
}
OR
Extract buttons to a new row.
<div class="row">
<div class="col-sm-4">
<h3>Stationær & bærbar reparationer</h3>
<p>Vi kan udskifte alle typer hardware de mest almindelige reparationer omfatter</p>
</div>
<div class="col-sm-4">
<h3>Fjernelse af virus</h3>
<p>Hvis din computer er inficeret med virus kan vi hjælpe dig med at rense ud i dit system. Vi kan herudover også hjælpe dig med at sikre dit system mod kommende virus angreb.</p>
</div>
<div class="col-sm-4">
<h3>Data recovery</h3>
<p>Hvis din harddisk er defekt skifter vi den billigt og hurtigt, vi kan genskabe dine data tilbage i de fleste tilfælde. eller hvis Windows er gået ned, kan vi også redde din data. </p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
LÆS MERE
</div>
<div class="col-sm-4">
LÆS MERE
</div>
<div class="col-sm-4">
LÆS MERE
</div>
</div>
</div>
Edit: Adding code
but i see that not the way to do it, if i should use that class again, i may have to add one more class to the parent element and retarget it as you said, just need to figure out how :) i am just a noob and pretty new at this.
but it looks good so far i think
My new PC service site
I wrote some code for an advanced liquid slider. But as my header slider contains some major content like h-tags p-tags and some images. I asked myself "can I consider each slide as an article". Because I can't find the correct answer maybe somebody can help me. The question is, is my code correctly nested and the right use of Semantic Elements. The code is:
<header id="masthead" class="site-header" role="banner">
<div id="main-slider" class="liquid-slider">
<article id="slider-1" class="liquid-slide-wrapper" style="background: url(images/back-99.jpg) 50% 50% /cover; repeat:no-repeat; min-height:450px;">
<section class="section-text-left">
<header>
<h1 class="title" style=" color:#f7740a; display:none;">Professionele, betaalbare website nodig?</h2>
<h2 style=" color:#fff; display:none;">Zelf uw website aanpassen?</h3>
</header>
<p style="display:none; color:#fff;">Onze unieke websites worden afgeleverd met een wordpress CMS systeem.<br>
Hiermee kan u zelf uw website aanpassen!<br> Vat de kudu bij de horens en contacteer ons voor meer info!
</p>
<p style="display:none;"><button type="button" class="btn btn-primary btn-lg">Mail Ons</button> <button type="button" class="btn btn-transparent btn-lg">0494 / 77 22 61</button></p>
</section>
<section class="section-img-right clearfix">
<img class="slider-img-right fadeInRight animated" style="display:none; width:100%; max-width:692px; height:auto;" src="images/imac.png" />
<img class="slider-img-right fadeIn animated-slow" style="display:none; width:100%; max-width:692px; height:auto;" src="images/straf-webdesign.png" />
<img class="slider-img-right fadeIn animated-slow" style="display:none; width:100%; max-width:692px; height:auto;" src="images/responsive-webdesign.png" />
</section>
</article>
<article id="slider-2" style="background: url(images/background-7.png) 50% 50% /cover; repeat:no-repeat; min-height:450px;">
<section class="section-text-left">
<header>
<h1 class="title" style=" color:#f7740a; display:none;">JustOnWeb wordt Kudu Concepts!</h2>
<h2 style="display:none; color:#000;">Een nieuwe naam, met een professionelere aanpak!</h3>
<header>
<p style="display:none; color:#fff;">Een website bestaat uit meer dan een lay-out. <br>Met kudu Concepts gaan we verder daar waar anderen stoppen!<br>
We bedenken een volledige filosofie voor uw website en <br> combineren dit met onze kennis van Online Marketing!
</p>
</section>
</article>
</div>
</header>
According to W3School semantic here : http://www.w3schools.com/html/html5_semantic_elements.asp
< section > contain < article >
it is not recommanded to use < section > inside < article > and inside < header >
According W3C, a section is "a thematic grouping of content, typically with a heading."
< header > is on top of parent element, so on top of body (the header) but also on top of sections or articles or any other div
In your code :
< h1 > should be close with < / h1 > and not h2, same for < h2 >
On this page: http://www.tff-bvba.be, I need the grey background behind the picture to be full-width on all resolutions, and the text and picture to be centered on the screen. Everything works ok, except the fact that the background continues to the right, off the screen (scroll to the right, you'll see).
I spent 2 hours looking for a solution but found none that worked for me... This is my code:
HTML:
<div class="wide">
<div class="odd">
<div class="homeimage"><img src="http://www.tff-bvba.be/wp-content/uploads/2013/11/hugo- home.png" alt="hugo-home" class="alignright size-full wp-image-1283" /></div>
<div class="hometext"><h1>Slaag in je materiaalinnovatie</h1>
Plan je een complexe innovatie waarbij de <b>combinatie en vorm van materialen</b> essentieel is? Missen je medewerkers <i>knowhow</i> of heb je tijdelijk versterking nodig?<br /><br />TFF maximaliseert de slaagkans van je project door:
<ul>
<li><b>35 jaar ervaring</b> in slimme materiaalcombinaties</li>
<li>maximaal <b>draagvlak </b>bij je medewerkers</li>
<li>bewezen expertise in<b> technieken en processen</b></li>
</ul>
<a class="bttn" title="Slimme materiaalinnovatie" href="http://www.tff-bvba.be/materiaalinnovatie/">Ontdek ons aanbod</a>
</div>
</div>
</div>
CSS:
.wide {
text-align:left;
font-weight:bold;
background:#ebebeb;
margin-left:-100%;
margin-right:-100%;
margin-bottom: 60px;
height: 465px;
}
.odd {
background-color:#ebebeb;
clear:both;
width:900px;
padding:40px 0 27px 0;
margin: 0 auto;
}
.hometext {
float: left;
width: 500px;
}
.homeimage {
margin-top: 0px;
float: right;
}
Thanks for your help, much appreciated!
Stefaan
I've changed your html and css using firebug in real-time and it works look:
Your problem is the html, your .wide div are placed on the wrong place, i've placed it correctly, and changed a little the CSS, use these html and css:
HTML:
<div id="bdywrapper2">
<div class="wide">
<div class="odd">
<div class="homeimage"><img src="http://www.tff-bvba.be/wp-content/uploads/2013/11/hugo-home.png" alt="hugo-home" class="alignright size-full wp-image-1283"></div>
<div class="hometext">
<h1>Slaag in je materiaalinnovatie</h1>
<p>Plan je een complexe innovatie waarbij de <b>combinatie en vorm van materialen</b> essentieel is? Missen je medewerkers <i>knowhow</i> of heb je tijdelijk versterking nodig?</p>
<p>TFF maximaliseert de slaagkans van je project door:</p>
<ul>
<li><b>35 jaar ervaring</b> in slimme materiaalcombinaties</li>
<li>maximaal <b>draagvlak </b>bij je medewerkers</li>
<li>bewezen expertise in<b> technieken en processen</b></li>
</ul>
<p><a class="bttn" title="Slimme materiaalinnovatie" href="http://www.tff-bvba.be/materiaalinnovatie/">Ontdek ons aanbod</a>
</p></div>
</div>
</div>
<!-- Start of main -->
<div class="main">
<div class="clear"></div>
<!-- Start of dynamic loop -->
<div class="dynoloop">
<!-- ******************************************************************** This is the start of blog loop ********************************************************************-->
<!-- Start of one half first -->
<div class="blog_one_half_first">
<!-- Start of slider wrapper -->
<section class="slider_wrapper">
<!-- Start of slider -->
<section style="overflow: hidden;" class="slider">
<ul style="width: 800%; margin-left: -412px;" class="slides"><li style="width: 412px; float: left; display: block;" class="clone">
<h3>Een tevreden klant vertelt…</h3>
<br>
<p>“Mayser/M.Pore ontwikkelt en produceert metaalschuimen voor toepassingen zoals LED-koeling. TFF beschikt over jarenlange ervaring op dit domein. Ze assisteren ons dagelijks op vlak van kwaliteit, productiviteit en creativiteit.” – Manfred Jordan, CEO Mayser/M.Pore</p>
<p>Meer klanten</p>
</li>
<li style="width: 412px; float: left; display: block;">
<h3>Daarom werk je met ons</h3>
<br>
<h2>Daarom werk je met ons</h2>
<p>1. Unieke ervaring: <b>materiaalinnovatie + bedrijfsvoering</b></p>
<p>
2. <b>Snelle terugverdientijd</b> door interim dividenden</p>
<p>3. Mensgerichte aanpak: <b>draagvlak bij stakeholders</b><br>
Overtuig jezelf</p>
</li>
<li style="width: 412px; float: left; display: block;">
<h3>Een tevreden klant vertelt…</h3>
<br>
<p>“Mayser/M.Pore ontwikkelt en produceert metaalschuimen voor toepassingen zoals LED-koeling. TFF beschikt over jarenlange ervaring op dit domein. Ze assisteren ons dagelijks op vlak van kwaliteit, productiviteit en creativiteit.” – Manfred Jordan, CEO Mayser/M.Pore</p>
<p>Meer klanten</p>
</li>
<li style="width: 412px; float: left; display: block;" class="clone">
<h3>Daarom werk je met ons</h3>
<br>
<h2>Daarom werk je met ons</h2>
<p>1. Unieke ervaring: <b>materiaalinnovatie + bedrijfsvoering</b></p>
<p>
2. <b>Snelle terugverdientijd</b> door interim dividenden</p>
<p>3. Mensgerichte aanpak: <b>draagvlak bij stakeholders</b><br>
Overtuig jezelf</p>
</li></ul>
<ol class="flex-control-nav"><li><a class="active">1</a></li><li><a>2</a></li></ol><ul class="flex-direction-nav"><li><a class="prev" href="#">Prev</a></li><li><a class="next" href="#">Next</a></li></ul></section><!-- End of slider -->
<!-- Start of clear fix --><div class="clear"></div>
</section><!-- End of slider wrapper -->
</div><!-- End of one half first -->
<!-- Start of one half -->
<div class="blog_one_half">
<!-- Start of slider wrapper -->
<section class="slider_wrapper">
<!-- Start of slider -->
<section class="slider">
<ul class="slides">
<li style="display: list-item;">
<h3>Een tevreden klant vertelt…</h3>
<br>
<h2>Een tevreden klant vertelt…</h2>
<p>
“Mayser/M.Pore ontwikkelt en produceert metaalschuimen voor toepassingen zoals LED-koeling. TFF beschikt over jarenlange ervaring op dit domein. Ze assisteren ons dagelijks op vlak van kwaliteit, productiviteit en creativiteit.” – Manfred Jordan, CEO Mayser/M.Pore<br>
Meer klanten</p>
</li>
</ul>
</section><!-- End of slider -->
<!-- Start of clear fix --><div class="clear"></div>
</section><!-- End of slider wrapper -->
</div><!-- End of one half -->
<!-- ******************************************************************** This is the emd of blog loop ********************************************************************-->
<div class="clear"></div>
</div><!-- End of dynamic loop -->
</div><!-- End of main -->
<!-- Start of accent bottom -->
<div class="accentbottom">
<!-- Start of accent top -->
<div class="accenttop">
</div><!-- End of accent top -->
</div><!-- End of accent bottom -->
</div>
CSS:
.wide {
text-align:left;
font-weight:bold;
background:#ebebeb;
margin-bottom: 60px;
width: 100%;
height: 465px;
}
Try Below CSS
.main {
margin: 0 auto;
padding-bottom: 60px;
width: 100%;
}
.wide {
background-color: #EBEBEB;
font-weight: bold;
height: 465px;
text-align: left;
}
Simple changes will do the trick for you
remove
margin-left:-100%;
margin-right:-100%;
from class .wide and give odd class 100% width instaed of 900px
Your CSS at present is stretching the bg....!!
EDIT :
edit after the comment : use a wrapper class to wrap your entire text and images, put odd to width:100%, this will ensure better compatibility and ease of CSS flow
HTML
<div class="odd">
<div class="wrapper">
<div class="homeimage">
<img src="" class="alignright size-full wp-image-1283" />
</div>
<div class="hometext">
</div>
</div> <!-- //wrapper -->
</div><!-- //odd-->
CSS
.wrapper{width:90%;margin:0 auto} // this will center the div and not take whole width at the same time