Hoe voorkom ik dat het ene tekstblok het andere bedekt (in mobile view)

Status
Niet open voor verdere reacties.

Allard

Gebruiker
Lid geworden
8 dec 2001
Berichten
892
Ik heb in squarespace een tekstblok gemaakt met een kleine offset naar boven.

floating block_1.jpg

Ik heb hier de volgende code voor gebruikt

#block-yui_3_17_2_1_1549815523353_5402 {background-color: #58645E;
margin-left: 0px;
margin-top: -200px;
z-index: 3000;
color: #ccc;
padding: 50px;}

#welkom
{overflow: visible !important;}

****************

in mijn browser werkt dit prima, maar zodra ik naar mobiel view ga, dan overlapt het groene blok de tekst die er normaliter links van staat. Dat komt er gewoon onder te liggen zeg maar.


floating block_mobile.jpg


Hoe voorkom ik dat dit gebeurd? Ik wil dat het groene blok gewoon netjes onder het linker gedeelte komt te liggen...
 
Probeer in je tekstblok eens de CSS: float: right;
 
Je kan gebruik maken van @media.
De waardes van margin en padding zal je zelf moeten proberen.

Code:
/* smartphone */
#block-yui_3_17_2_1_1549815523353_5402 {
  margin-left: 0px;
  margin-top: -30px;
  padding: 20px;
  z-index: 3000;
  background-color: #58645E;
  color: #ccc;
}

/* wat is anders op schermen vanaf 768px */
@media (min-width: 768px) {
  #block-yui_3_17_2_1_1549815523353_5402 {
    margin-top: -100px;
    padding: 35px;
  }
}

/* wat is anders op schermen vanaf 992px */
@media (min-width: 992px) {
  #block-yui_3_17_2_1_1549815523353_5402 {
    margin-top: -200px;
    padding: 50px;
  }
}

Op deze manier kan je css voor verschillende beeldscherm resoluties maken.

Een andere manier is het werken met relatieve eenheden in plaats van px.
https://www.w3schools.com/cssref/css_units.asp
Voorbeelden: vw vh % em rem
 
Dit werkt perfect!

Het is wel zo, dat zodra ik de omliggende tekst aanpas.. ik de margins zelf moet aanpassen om het weer passend te maken toch?

Heel erg bedankt in ieder geval!

mvg
 
Het is wel zo, dat zodra ik de omliggende tekst aanpas.. ik de margins zelf moet aanpassen om het weer passend te maken toch?
Dit komt omdat de css niet responsive is. Een responsive ontwerp zal automatisch aan het scherm aanpassen. Zie de relatieve eenheden in berichtje 4.
 
Ah ja dat maakt sense

Dankjewel voor je hulp, ik weet genoeg nu!

mvg
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan