Hele domme vraag, maar wat bedoel je met "gaat mij website down"? CSS laat je website niet down gaan. Wat is nu je probleem?
Link gekopieerd
Dank U Wel Ben,
ik heb het probleem op deze manier opgelost:
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
johannes
Link gekopieerd
Let wel op dat de default stylesheet dus voor de mobiele telefoon is. Gezien Bootstrap een Mobile-first framework is.
Link gekopieerd
Hallo,
ik krijg het probleem weer nadat ik maak gebruik van media queries van bootstrap .
het background kleur van header en footer wordt niet getoond .
deze is mij css code:
// Medium devices (tablets, 768px and up)
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.site-header
{
border:0.0625em solid #074e68;
background-color:#074e68;
height:6em;
width:100%;
}
.site-title
{
margin-top:-0.3em;
margin-left:-1.5em;
color:#f5f5f5;
font-size:1.4em;
font-weight:400;
}
.site-description
{
margin-left:-0.1em;
margin-top:-1.2em;
color:#f5f5f5;
word-wrap:nowrap;
font-size:1em;
font-weight:400;
}
.site-header-advertentie
{
margin-top:-4%;
color:#808080;
opacity:1.2;
font-size:1.2em;
font-weight:400;
margin-left:0.5%;
}
.site-header-advertentieV
{
margin-top:-1.95%;
color:#808080;
opacity:1.2;
font-size:1.2em;
font-weight:500;
margin-left:-4.5%;
}
.site-header-image {
width:100%;
margin-top:0em;
}
.site-image-board {
border:0.0625em solid #074e68;
background-color:#074e68;
height:3em;
width:100%;
margin-top:0em;
}
.site-image-boardT1 {
color:#f5f5f5;
margin-top:-2em;
font-weight:400;
margin-left:
}
.site-image-boardT2 {
color:#f5f5f5;
margin-top:-2em;
font-weight:400;
margin-left:10.5em;
}
.site-image-boardT3 {
color:#f5f5f5;
margin-top:-2em;
font-weight:400;
}
.entry-title {
display:none;
}
/*------------
Home page----------*/
/*----------------
footer en info----*/
.site-footer {
border:0.0625 solid #074e68;
background-color:#074e68;
height:10em;
width:100%;
}
.site-info {
border:0.0625 solid #333333;
background-color:#333333;
height:4em;
width:100%;
}
.site-footer-section1 {
margin-top:1.5em;
color:#f5f5f5;
}
.site-footer-section2 {
margin-top:1.5em;
color:#f5f5f5;
margin-left:2em;
}
.site-footer-section3 {
margin-top:1.5em;
color:#f5f5f5;
}
.site-footer-section3C {
color:white;
}
.site-info-section2 {
margin-top:1.5em;
color:#9c9c9c;
opacity:1.2;
}
.site-info-section3 {
margin-top:1.5em;
color:#9c9c9c;
opacity:1.2;
}
/*--------------------
#repair-pagina
----------------------*/
.articleR1,
h5 {
margin-top:1em;
}
.articleR2,
h5 {
margin-top:1em;
}
.articleR3,
h5 {
margin-top:1em;
}
.articleR4,
h5 {
margin-top:1em;
}
.articleR5,
h5 {
margin-top:1em;
}
.articleR6,
h5 {
margin-top:1em;
}
.imgR1 {
margin-left:-2em;
}
/*----------------
#banden-pagina
-----------------*/
.articleB1,
h5 {
margin-top:1em;
}
.articleB2,
h5 {
margin-top:1em;
}
.articleB3,
h5 {
margin-top:1em;
}
.articleB4,
h5 {
margin-top:1em;
}
.articleB5,
h5 {
margin-top:1em;
}
/*------------
#section-apk
-----------------*/
.articleA1,
h5 {
margin-top:1em;
}
.articleA2,
h5 {
margin-top:1em;
}
.articleA3,
h5 {
margin-top:1em;
}
.articleA4,
h5 {
margin-top:1em;
}
.articleA5,
h5 {
margin-top:1em;
}
}
// Large devices (desktops, 992px and up)
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.site-header
{
border:0.0625em solid #074e68;
background-color:#074e68;
height:6em;
width:100%;
}
.site-title
{
margin-top:-0.3em;
margin-left:-1.5em;
color:#f5f5f5;
font-size:1.4em;
font-weight:400;
}
.site-description
{
margin-left:-0.1em;
margin-top:-1.2em;
color:#f5f5f5;
word-wrap:nowrap;
font-size:1em;
font-weight:400;
}
.site-header-advertentie
{
margin-top:-4%;
color:#808080;
opacity:1.2;
font-size:1.2em;
font-weight:400;
margin-left:0.5%;
}
.site-header-advertentieV
{
margin-top:-1.95%;
color:#808080;
opacity:1.2;
font-size:1.2em;
font-weight:500;
margin-left:-4.5%;
}
.site-header-image {
width:100%;
margin-top:0em;
}
.site-image-board {
border:0.0625em solid #074e68;
background-color:#074e68;
height:3em;
width:100%;
margin-top:0em;
}
.site-image-boardT1 {
color:#f5f5f5;
margin-top:-2em;
font-weight:400;
margin-left:
}
.site-image-boardT2 {
color:#f5f5f5;
margin-top:-2em;
font-weight:400;
margin-left:10.5em;
}
.site-image-boardT3 {
color:#f5f5f5;
margin-top:-2em;
font-weight:400;
}
.entry-title {
display:none;
}
/*------------
Home page----------*/
/*----------------
footer en info----*/
.site-footer {
border:0.0625 solid #074e68;
background-color:#074e68;
height:10em;
width:100%;
}
.site-info {
border:0.0625 solid #333333;
background-color:#333333;
height:4em;
width:100%;
}
.site-footer-section1 {
margin-top:1.5em;
color:#f5f5f5;
}
.site-footer-section2 {
margin-top:1.5em;
color:#f5f5f5;
margin-left:2em;
}
.site-footer-section3 {
margin-top:1.5em;
color:#f5f5f5;
}
.site-footer-section3C {
color:white;
}
.site-info-section2 {
margin-top:1.5em;
color:#9c9c9c;
opacity:1.2;
}
.site-info-section3 {
margin-top:1.5em;
color:#9c9c9c;
opacity:1.2;
}
/*--------------------
#repair-pagina
----------------------*/
.articleR1,
h5 {
margin-top:1em;
}
.articleR2,
h5 {
margin-top:1em;
}
.articleR3,
h5 {
margin-top:1em;
}
.articleR4,
h5 {
margin-top:1em;
}
.articleR5,
h5 {
margin-top:1em;
}
.articleR6,
h5 {
margin-top:1em;
}
.imgR1 {
margin-left:-2em;
}
/*----------------
#banden-pagina
-----------------*/
.articleB1,
h5 {
margin-top:1em;
}
.articleB2,
h5 {
margin-top:1em;
}
.articleB3,
h5 {
margin-top:1em;
}
.articleB4,
h5 {
margin-top:1em;
}
.articleB5,
h5 {
margin-top:1em;
}
/*------------
#section-apk
-----------------*/
.articleA1,
h5 {
margin-top:1em;
}
.articleA2,
h5 {
margin-top:1em;
}
.articleA3,
h5 {
margin-top:1em;
}
.articleA4,
h5 {
margin-top:1em;
}
.articleA5,
h5 {
margin-top:1em;
}
}
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
.site-header
{
border:0.0625em solid #074e68;
background-color:#074e68;
height:6em;
width:100%;
}
.site-title
{
margin-top:-0.3em;
margin-left:-1.5em;
color:#f5f5f5;
font-size:1.4em;
font-weight:400;
}
.site-description
{
margin-left:-0.1em;
margin-top:-1.2em;
color:#f5f5f5;
word-wrap:nowrap;
font-size:1em;
font-weight:400;
}
.site-header-advertentie
{
margin-top:-4%;
color:#808080;
opacity:1.2;
font-size:1.2em;
font-weight:400;
margin-left:0.5%;
}
.site-header-advertentieV
{
margin-top:-1.95%;
color:#808080;
opacity:1.2;
font-size:1.2em;
font-weight:500;
margin-left:-4.5%;
}
.site-header-image {
width:100%;
margin-top:0em;
}
.site-image-board {
border:0.0625em solid #074e68;
background-color:#074e68;
height:3em;
width:100%;
margin-top:0em;
}
.site-image-boardT1 {
color:#f5f5f5;
margin-top:-2em;
font-weight:400;
margin-left:
}
.site-image-boardT2 {
color:#f5f5f5;
margin-top:-2em;
font-weight:400;
margin-left:10.5em;
}
.site-image-boardT3 {
color:#f5f5f5;
margin-top:-2em;
font-weight:400;
}
.entry-title {
display:none;
}
/*------------
Home page----------*/
/*----------------
footer en info----*/
.site-footer {
border:0.0625 solid #074e68;
background-color:#074e68;
height:10em;
width:100%;
}
.site-info {
border:0.0625 solid #333333;
background-color:#333333;
height:4em;
width:100%;
}
.site-footer-section1 {
margin-top:1.5em;
color:#f5f5f5;
}
.site-footer-section2 {
margin-top:1.5em;
color:#f5f5f5;
margin-left:2em;
}
.site-footer-section3 {
margin-top:1.5em;
color:#f5f5f5;
}
.site-footer-section3C {
color:white;
}
.site-info-section2 {
margin-top:1.5em;
color:#9c9c9c;
opacity:1.2;
}
.site-info-section3 {
margin-top:1.5em;
color:#9c9c9c;
opacity:1.2;
}
/*--------------------
#repair-pagina
----------------------*/
.articleR1,
h5 {
margin-top:1em;
}
.articleR2,
h5 {
margin-top:1em;
}
.articleR3,
h5 {
margin-top:1em;
}
.articleR4,
h5 {
margin-top:1em;
}
.articleR5,
h5 {
margin-top:1em;
}
.articleR6,
h5 {
margin-top:1em;
}
.imgR1 {
margin-left:-2em;
}
/*----------------
#banden-pagina
-----------------*/
.articleB1,
h5 {
margin-top:1em;
}
.articleB2,
h5 {
margin-top:1em;
}
.articleB3,
h5 {
margin-top:1em;
}
.articleB4,
h5 {
margin-top:1em;
}
.articleB5,
h5 {
margin-top:1em;
}
/*------------
#section-apk
-----------------*/
.articleA1,
h5 {
margin-top:1em;
}
.articleA2,
h5 {
margin-top:1em;
}
.articleA3,
h5 {
margin-top:1em;
}
.articleA4,
h5 {
margin-top:1em;
}
.articleA5,
h5 {
margin-top:1em;
}
}
en deze is mij header.php code:
<div class="container">
<div class="row">
<div class="site-header col-sm-12 col-md-12 col-lg-12 col-xl-12 ">
<div class="row">
<div class="site-title col-sm-4 col-md-4 col-lg-4 col-xl-4">
<h5>David's APK Station</h5>
<div class="row">
<div class="site-description text-nowrap col-sm-4 col-md-4 col-lg-4 col-xl-4">
<h5>Reparatie & Onderhoud<br> Alle Merken Auto's </h5></div> </div> </div>
<div class="site-logo col-sm-4 col-md-4 col-lg-4 col-xl-4"> </div>
<div class="site-header-tekst col-sm-4 col-md-4 col-lg-4 col-xl-4"><h5> </h5> </div>
</div> </div> </div>
<div class="site-header-image">
<?php
echo do_shortcode('[smartslider3 slider=157]');
?>
</div>
<div class="container-fluid1">
<div class="row">
<div class="site-image-board">
<div class="row">
<div class="site-image-boardT1 text-nowrap col-sm-4 col-md-4 col-lg-4 col-xl-4">
<h6> Welkom bij David's Auto Service</h6></div>
<div class="site-image-boardT2 text-nowrap col-sm-4 col-md-4 col-lg-4 push-lg-3 col-xl-4">
<h6>40 jaar vaak ervaring </h6></div>
<div class="site-image-boardT3 text-nowrap col-sm-4 col-md-4 col-lg-4 push-lg-8 col-xl-4">
<h6>BMW Specialist(25 jaar ervaring)</h6></div>
</div> </div> </div> </div>
en deze is mij footer.php code:
<div class="container-fluid2">
<div class="row">
<div class="site-footer">
<div class="row">
<div class="site-footer-section1 col-sm-4 col-md-4 col-lg-4 col-xl-4">Je krijgt altijd vooraf een<br>
prijsopgave, dus geen verrassingen<br>
achteraf. </div>
<div class="site-footer-section2 col-sm-4 col-md-4 col-lg-4 col-xl-4">Gecertificeerde eerste monteur<br>
Keurmeester(25 jaar ervaring) </div>
<div class="site-footer-section3 text-nowrap col-sm-4 col-md-4 col-lg-4 col-xl-4"> David's Apk Station <br>
Klompenmakerstraat 123<br>
3194 DD Hoogvliet RT<br>
010-2160660
<div class="row">
<div class="site-footer-section3C col-sm-4 col-md-4 col-lg-4 col-xl-4"> Email:[email protected] </div> </div>
</div> </div> </div> </div>
<div class="container-fluid1">
<div class="row">
<div class="site-info">
<div class="row">
<div class="site-info-section1 col-sm-4 col-md-4 col-lg-4 col-xl-4"> </div>
<div class="site-info-section2 col-sm-4 col-md-4 col-lg-4 col-xl-4">40 jaar vaak ervaring </div>
<div class="site-info-section3 col sm-4 col-md-4 col-lg-4 col-xl-4">BMW Specialist(25 jaar ervaring)</div>
</div>
</div> </div> </div>
plus als ik inspect klikken op mij website url:
http://webdesignleren.net/
ik krijg 2 fout meldingen als volgende: Failed to load resource: the server responded with a status of 404 (Not Found)
ik heb gezocht voor oplossing voor deze fout meldingen maar ik kunde niet vinden.
wat zou het probleem zijn eigenlijk
ik heb voor container fluid 1 en 2 aparte code in app.css:
.container-fluid1 {
position: relative;
margin-left:2em;
margin-right:-10.5em;
padding-right:15px;
padding-left: 15px;
}
.container-fluid2 {
position: relative;
margin-left:2em;
margin-right:-9em;
padding-right:15px;
padding-left: 15px;
}
hoe ik kan deze problemen oplossen.
Dank U Wel
johannes
[size=xsmall]
Toevoeging op 14/06/2017 11:41:58: [/size]
ik wil deze thread sluiten.
johannes
Link gekopieerd
