margin-top is deforming on onderhoud page between 541 to 640px?

  • Resolved johannes999

    (@johannes999)


    1 year, 6 months ago

    hello,

    I made media query between 541px to 640px .

    but when I open onderhoud page in this resolution the top margin is deforming .

    this is the code :

    .flex-container-onderhoud-page-section1 {
	
	  width:100%;
	max-height:500px;
	display:flex;
	flex-direction:column-reverse;	
  margin-top:6rem;
	
}
	.onderhoud-page-section1-left-side    {
	
	width:100%;

  
	
			
}


.onderhoud-page-section1-right-side{

	width:100%;
	
}

.onderhoud-page-section1-right-side-title {
	font-size:1.75rem;	
color:#000000;
font-family: 'Ravi Prakash', cursive;
margin-left:2%;
	
      

}

    I know that when I go from 541 to 640px it wil change of position when I use margin-top but the problem is it is taking to much space.

    how I can solve this problem I tried vh property but it didn’t help?

    you have to go to onderhoud page and open inspect element between 541 to 640px to see what I mean.

    how I can make it more stable? I am using column-reverse may be this is causing the problem

    thanks

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter johannes999

    (@johannes999)

    I have removed max-height from the class:

    .flex-container-onderhoud-page-section1 {
	
	  width:100%;
	/*max-height:500px;*/
	display:flex;
	flex-direction:column-reverse;	
  margin-top:1rem;
	
}

    and the problem is solved .

    I don’t understand why max-height is causing problem with margin-top.

    there must be some answer for this issue.

    thanks

    Moderator bcworkz

    (@bcworkz)

    Hi Johannes,

    Even though you’ve resolved this, I investigated anyway, hoping to find an explanation. It is because a 500px max-height container is simply not tall enough to contain the image, text, etc., along with a top margin. Thus the margin collapses and the title overlaps slightly above to keep the container at a max. of 500px height.

    In general, fixed heights don’t work well in responsive design since the text content height changes with the view port width.

    I’m glad you found a solution even if it wasn’t clear why ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘margin-top is deforming on onderhoud page between 541 to 640px?’ is closed to new replies.