[Resolved] div-box doesn't respond to css anymore

[Author]

Posts

[Lara]

I am trying to:

<div class="reitlehrer-se-container">
  
  <div class="reitlehrer-se-row-1"> 
    <h1>[types field="name-reitlehrer" class="reitlehrer-name" ][/types]</h1>
  </div>
  
  <div class="reitlehrer-se-row-2">
     [wpv-view name="reitlehrer-im-reitsport-reitlehrer-bilder-slider-fuer-suchmaschine-und-webvisitenkarte" limit="-1" offset="0" orderby="date" order="desc"]
  </div>
  
 
<div class="reitlehrer-basisdaten-container">
  
  <div class="reitlehrer-basisdaten-row-1">   
  <p><strong>[types field='reitweise'][/types]</strong><br/>
  [types field="niveau-reitlehrer-dressur"][/types], [types field="niveau-reitlehrer-springen"][/types]<br/>
  Qualifikation: [types field="qualifikation-reitlehrer"][/types]<br/><br/>
  Mindestniveau Reitschüler:<br/>
  [types field="mindestniveau-reitschuler-dressur"][/types]<br/>
  [types field="mindestniveau-reitschuler-springen"][/types]<br/><br/>
  Schulpferde: [types field="schulpferde-ja-nein"][/types]<br/>
  Beritt: [types field="beritt-ja-nein"][/types]</p>
  </div>
  
  <div class="reitlehrer-basisdaten-row-2">
  [types field='profilbild' class='reitlehrer-basisdaten-profilpicture-style' size='custom' width='135px' height='auto' resize='proportional'][/types]
  </div>
  
  <div class="reitlehrer-basisdaten-row-1">   
    <p>Reitanlagen:<br/>
    <strong>[types field='plz-reitanlage-1'][/types] | [types field='name-reitanlage-1'][/types]</strong><br/>
    Externe Reitschüler erlaubt?: [types field='externe-reitschuler-erlaubt-1'][/types]<br/><br/>
    
[wpv-conditional if="( $(wpcf-name-reitanlage-2) ne '' ) OR ( $(wpcf-plz-reitanlage-2) ne '' )"]    <strong>[types field='plz-reitanlage-2'][/types] | [types field='name-reitanlage-2'][/types]</strong><br/>
    Externe Reitschüler erlaubt?: [types field='externe-reitschuler-erlaubt-2'][/types]<br/><br/>[/wpv-conditional]

[wpv-conditional if="( $(wpcf-name-reitanlage-3) ne '' ) OR ( $(wpcf-plz-reitanlage-3) ne '' )"]    <strong>[types field='plz-reitanlage-3'][/types] | [types field='name-reitanlage-3'][/types]</strong><br/>
    Externe Reitschüler erlaubt?: [types field='externe-reitschuler-erlaubt-3'][/types]<br/><br/>[/wpv-conditional]
      
[wpv-conditional if="( $(wpcf-name-reitanlage-4) ne '' ) OR ( $(wpcf-plz-reitanlage-4) ne '' )"]    <strong>[types field='plz-reitanlage-4'][/types] | [types field='name-reitanlage-4'][/types]</strong><br/>
    Externe Reitschüler erlaubt?: [types field='externe-reitschuler-erlaubt-4'][/types]<br/><br/>[/wpv-conditional]
      
[wpv-conditional if="( $(wpcf-name-reitanlage-5) ne '' ) OR ( $(wpcf-plz-reitanlage-5) ne '' )"]    <strong>[types field='plz-reitanlage-5'][/types] | [types field='name-reitanlage-5'][/types]</strong><br/>
    Externe Reitschüler erlaubt?: [types field='externe-reitschuler-erlaubt-5'][/types]<br/><br/>[/wpv-conditional]
      
[wpv-conditional if="( $(wpcf-name-reitanlage-6) ne '' ) OR ( $(wpcf-plz-reitanlage-6) ne '' )"]    <strong>[types field='plz-reitanlage-6'][/types] | [types field='name-reitanlage-6'][/types]</strong><br/>
    Externe Reitschüler erlaubt?: [types field='externe-reitschuler-erlaubt-6'][/types]<br/><br/>[/wpv-conditional]
      
[wpv-conditional if="( $(wpcf-name-reitanlage-7) ne '' ) OR ( $(wpcf-plz-reitanlage-7) ne '' )"]    <strong>[types field='plz-reitanlage-7'][/types] | [types field='name-reitanlage-7'][/types]</strong><br/>
    Externe Reitschüler erlaubt?: [types field='externe-reitschuler-erlaubt-7'][/types]<br/><br/>[/wpv-conditional]
      
[wpv-conditional if="( $(wpcf-name-reitanlage-8) ne '' ) OR ( $(wpcf-plz-reitanlage-8) ne '' )"]    <strong>[types field='plz-reitanlage-8'][/types] | [types field='name-reitanlage-8'][/types]</strong><br/>
    Externe Reitschüler erlaubt?: [types field='externe-reitschuler-erlaubt-8'][/types]<br/><br/>[/wpv-conditional]
      
[wpv-conditional if="( $(wpcf-name-reitanlage-9) ne '' ) OR ( $(wpcf-plz-reitanlage-9) ne '' )"]    <strong>[types field='plz-reitanlage-9'][/types] | [types field='name-reitanlage-9'][/types]</strong><br/>
    Externe Reitschüler erlaubt?: [types field='externe-reitschuler-erlaubt-9'][/types]<br/><br/>[/wpv-conditional]
      
[wpv-conditional if="( $(wpcf-name-reitanlage-10) ne '' ) OR ( $(wpcf-plz-reitanlage-10) ne '' )"]    <strong>[types field='plz-reitanlage-10'][/types] | [types field='name-reitanlage-10'][/types]</strong><br/>
    Externe Reitschüler erlaubt?: [types field='externe-reitschuler-erlaubt-10'][/types]<br/><br/>[/wpv-conditional]
      
[wpv-conditional if="( $(wpcf-name-reitanlage-11) ne '' ) OR ( $(wpcf-plz-reitanlage-11) ne '' )"]    <strong>[types field='plz-reitanlage-11'][/types] | [types field='name-reitanlage-11'][/types]</strong><br/>
    Externe Reitschüler erlaubt?: [types field='externe-reitschuler-erlaubt-11'][/types]<br/><br/>[/wpv-conditional]
      
[wpv-conditional if="( $(wpcf-name-reitanlage-12) ne '' ) OR ( $(wpcf-plz-reitanlage-12) ne '' )"]    <strong>[types field='plz-reitanlage-12'][/types] | [types field='name-reitanlage-12'][/types]</strong><br/>
    Externe Reitschüler erlaubt?: [types field='externe-reitschuler-erlaubt-12'][/types]<br/><br/>[/wpv-conditional]
      
[wpv-conditional if="( $(wpcf-name-reitanlage-13) ne '' ) OR ( $(wpcf-plz-reitanlage-13) ne '' )"]    <strong>[types field='plz-reitanlage-13'][/types] | [types field='name-reitanlage-13'][/types]</strong><br/>
    Externe Reitschüler erlaubt?: [types field='externe-reitschuler-erlaubt-13'][/types]<br/><br/>[/wpv-conditional]
      
[wpv-conditional if="( $(wpcf-name-reitanlage-14) ne '' ) OR ( $(wpcf-plz-reitanlage-14) ne '' )"]    <strong>[types field='plz-reitanlage-14'][/types] | [types field='name-reitanlage-14'][/types]</strong><br/>
    Externe Reitschüler erlaubt?: [types field='externe-reitschuler-erlaubt-14'][/types]<br/><br/>[/wpv-conditional]
      
[wpv-conditional if="( $(wpcf-name-reitanlage-15) ne '' ) OR ( $(wpcf-plz-reitanlage-15) ne '' )"]    <strong>[types field='plz-reitanlage-15'][/types] | [types field='name-reitanlage-15'][/types]</strong><br/>
    Externe Reitschüler erlaubt?: [types field='externe-reitschuler-erlaubt-15'][/types]<br/><br/>[/wpv-conditional]
      
[wpv-conditional if="( $(wpcf-name-reitanlage-16) ne '' ) OR ( $(wpcf-plz-reitanlage-16) ne '' )"]    <strong>[types field='plz-reitanlage-16'][/types] | [types field='name-reitanlage-16'][/types]</strong><br/>
    Externe Reitschüler erlaubt?: [types field='externe-reitschuler-erlaubt-16'][/types]<br/><br/>[/wpv-conditional]
      
[wpv-conditional if="( $(wpcf-name-reitanlage-17) ne '' ) OR ( $(wpcf-plz-reitanlage-17) ne '' )"]    <strong>[types field='plz-reitanlage-17'][/types] | [types field='name-reitanlage-17'][/types]</strong><br/>
    Externe Reitschüler erlaubt?: [types field='externe-reitschuler-erlaubt-17'][/types]<br/><br/>[/wpv-conditional]
      
[wpv-conditional if="( $(wpcf-name-reitanlage-18) ne '' ) OR ( $(wpcf-plz-reitanlage-18) ne '' )"]    <strong>[types field='plz-reitanlage-18'][/types] | [types field='name-reitanlage-18'][/types]</strong><br/>
    Externe Reitschüler erlaubt?: [types field='externe-reitschuler-erlaubt-18'][/types]<br/><br/>[/wpv-conditional]
      
[wpv-conditional if="( $(wpcf-name-reitanlage-19) ne '' ) OR ( $(wpcf-plz-reitanlage-19) ne '' )"]    <strong>[types field='plz-reitanlage-19'][/types] | [types field='name-reitanlage-19'][/types]</strong><br/>
    Externe Reitschüler erlaubt?: [types field='externe-reitschuler-erlaubt-19'][/types]<br/><br/>[/wpv-conditional]
      
[wpv-conditional if="( $(wpcf-name-reitanlage-20) ne '' ) OR ( $(wpcf-plz-reitanlage-20) ne '' )"]    <strong>[types field='plz-reitanlage-20'][/types] | [types field='name-reitanlage-20'][/types]</strong><br/>
    Externe Reitschüler erlaubt?: [types field='externe-reitschuler-erlaubt-20'][/types]<br/><br/>[/wpv-conditional]
      
      
   Weitere Reitanlagen auf Anfrage: [types field="weitere-reitanlagen-auf-anfrage"][/types]
  </div>
  
  <div class="reitlehrer-basisdaten-row-3">
  <a href="[wpv-post-url]">mehr erfahren ...</a></div>

</div>
  
</div>

/*LAPTOP*/

/*The main container. It is divided into several rows. First row: Name of the Riding Teacher. Second row: Riding Teacher Slider. Third row: Reitlehrer Basisdaten Container*/

.reitlehrer-se-container {
display: flex;
flex-flow: row wrap;
justify-content: center !important;
position: relative;
width: 500px !important;
padding: 5px 5px 5px 5px;
margin: 10px auto 65px auto;
  
}


/*----> First row: contains the name of the riding teacher*/
 
.reitlehrer-se-row-1 {
display: flex;
flex-flow: row nowrap;
justify-content: center !important;
width: 100%;
padding: 6px !important;
color: #553653;
}

/*----> Second row: contains the "Reitlehrer Picture Slider" with dotted line*/

.reitlehrer-se-row-2 {
display: flex;
flex-flow: row wrap;
justify-content: center !important;
border-top: 3px dotted #b9b9b9;
width: 100%;
padding: 3px !important;
}

/*----> Third row: contains the "Reitlehrer Basisdaten Container" */

/*The container "Reitlehrer Basisdaten Container": It is divided into three rows. First row: "information riding teacher", second row: "riding teacher profil picture", third row: "information equestrian stable" */

.reitlehrer-basisdaten-container {
display: flex;
flex-flow: row wrap;
justify-content: center !important;
position: relative;
background-color: #fff;

width: 98%;
padding: 0px;
margin: 5px auto 0px auto !important;
  
-webkit-box-shadow: 1px 27px 78px -25px rgba(205,193,170,1);
-moz-box-shadow: 1px 27px 78px -25px rgba(205,193,170,1);
box-shadow: 1px 27px 78px -25px rgba(205,193,170,1);
}

/*----> contains the information regarding the riding teacher. Content above the profil picture. Also is used for the box with the informations about the equestrian stables.*/

.reitlehrer-basisdaten-row-1 {
display: flex;
flex-flow: column wrap;
width: 100%;
height: auto;
margin: 15px 0px 0px 0px;
text-align: center;
}


/*----> contains the profil picture*/
 
.reitlehrer-basisdaten-row-2 {
display: flex;
flex-flow: column wrap;
position: relative
width: 100%;
height: auto;
margin: 0px auto 15px auto;
}


/*----> reitlehrer-se-profilpicture-style*/

.reitlehrer-basisdaten-profilpicture-style {
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border: 6px solid #fff;
  
-webkit-box-shadow: 1px 27px 78px -25px rgba(87,87,87,0.31);
-moz-box-shadow: 1px 27px 78px -25px rgba(87,87,87,0.31);
box-shadow: 1px 27px 78px -25px rgba(87,87,87,0.31);
  
margin-top: 0px;
}


/*----> contains the link to the "Webvistitenkarte/Profil" of the riding teacher in the searchengine, whereas it contains the additional indormation regarding "Schulpferde" and "Beritt" in the "Webvistenkarte/Profil" of the riding teacher */

.reitlehrer-basisdaten-row-3 {
display: flex;
flex-flow: column wrap;
justify-content: center;
width: 100%;
height: auto !important;
margin: 0px auto 20px auto;
text-align: center;
}

/* CSS FOR THE CONTENT IN THE "OUTPUT EDITOR" */

/* --> THE SEARCH css: The search on the top of this page*/
.reitlehrer-suchmaschine-suchbox {

}


/* --> THE OUTPUTBOX css: The box, which contains the output of this page*/
.reitlehrer-suchmaschine-output {

}

/* --> THE MAP css: The map at the end of this page*/
.map-reitlehrer-klassische-reitausbildung {
margin: 0px 0px 0px 0px !important;
border: 3px dotted #fff;
}






/* TABLET*/
@media (min-width:480px) and (max-width: 768px) {

/*The main container. */
.reitlehrer-se-container {
display: flex;
flex-flow: column wrap;
justify-content: center !important;
position: relative;
width: 400px !important;
padding: 5px 5px 5px 5px;
margin: 10px auto 65px auto;
}

}

/*SMARTPHONE*/
@media (max-width: 479px) {

/*The main container. */
.reitlehrer-se-container {
display: flex;
flex-flow: column wrap;
justify-content: center !important;
position: relative;
width: 300px !important;
padding: 5px 5px 5px 5px;
margin: 10px auto 65px auto !important;
}
  
}

Link to a page where the issue can be seen: hidden link

I expected to see: The name of the riding teacher and the content below the slider should be in the center of the page and the content below the slider should have a white background. It looks exactly like this on my smartphone, but on the laptop it stopped working since today.

Instead, I got: css is ignored on the laptop output

[Lara]

My issue is resolved now. Thank you!