in media query 480px-769.999px I want both side to be equal with margin(opening)

  • Resolved johannes999

    (@johannes999)


    1 year, 9 months ago

    hello,

    I want to have those 2 rows equal on both side with margin-left and right 4% ( flexbox) in the :

    @media (min-width: 480px) and (max-width: 679.9999px)

    this is my code :

    	
	 .box {
border:0.01 solid #4b5054;
 background-color:red;
box-sizing:inherit;
width:100%;
height:100px;
display:flex;
flex-direction:row;
}  

	.box-item1{
 width:78%;
justify-content:flex-start;	
float:left;
padding-top:15px;
margin-left:4%;

}
 .box-item1 h4{
	font-size:1rem;
	 font-weight:bold;
	 color:#ffd978; 

}

 .box-item1 p {
	margin-top:-1.75rem;
	font-size:14px;
	 line-height:1.2;
	 color:white;
}




 
.box-item2{
display:none;

}





.box-item3{
	width:22%;
	justify-content:flex-end;	
	padding-top:12.5px;  	
	float:right;
	margin-right:4%;
  
} 



	  

.box-item3 h4 {	
	font-size:1rem;
	 font-weight:bold;
	 color:#ffd978; 
	
}

.box-item3 p {
	color:white;	
		font-size:14px;		
	margin-top:-1.75rem;
	line-height:1.2;
}

    when you go to my url and open inspect element in chrome or firefox and go to the range 480px and try to go up to 679 the margins on the left and the right are coming unequal while I want those 2 boxes-item to be 4% on the both side in the range of 480px to 679px.

    I mean I want both side the openings to be equal.

    can some one correct my code or give me some advice?

    I tried in other width for 2 boxes but the problem is the same.

    actually I know when 3 items (rows) are they have to be 33.333% eache item in flexbox.

    thanks

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

Viewing 5 replies - 1 through 5 (of 5 total)

  • I don’t know which section you’re working on specifically. But margin with “auto” left and right usually creates equal spaces; So if you have a width of 78% if would be something like

    width: 78%;
    margin: 0 auto;

    Thread Starter johannes999

    (@johannes999)

    thanks,

    I am trying now to study nesting flex box . because this is the problem

    I wil let it know later.

    When I resize the browser there is lots going on there with things disappearing, etc.

    Thread Starter johannes999

    (@johannes999)

    yes ,

    because I am now bussy with testing flex.

    I read this article : Flexbox is inherently a one dimensional layout model. Flex items within a flex container can be laid out either horizontally or vertically, but not both. If you want to lay out items in both dimensions, you’ll need to nest a flex container inside another one..

    if I can not solve it with flex I wil try grid or bootstrap.

    thanks again

    Thread Starter johannes999

    (@johannes999)

    thanks Janet,

    I am little too late it was all mess .

    I have worked many days to correct all the mess with flex

    it is in reality has to be like this: 3 classes each one has to be 33.333% .

    	
		.box {
		display:flex;
flex-direction:row;	
			width:100%;
		border:0.01 solid #4b5054;
    background-color:#4b5054;
box-sizing:inherit;
height:150px;
	}


.box-item1{
 width:33.333%;
max-width:1920px;
padding-top:10.5px;
margin-left:4%;
}
 .box-item1 h4{
	font-size:1.4rem;
	 font-weight:bold;
	 color:#ffd978;
	 display:flex;
	 justify-content:flex-start;

}

 .box-item1 p {
	margin-top:-1.75rem;
	font-size:15px;
	 line-height:1.2;
	 color:white;
	 display:flex;
	 justify-content:flex-start;
	 text-align:center;
}
.box-item2{

width:33.333%;
max-width:1920px;
padding-top:10.5px;

}
.box-item2 h4 {
	font-size:1.4rem;  
	 font-weight:bold;
	color:#ffd978; 
      display:flex;
	justify-content:center;
	align-items:center;
}
	.box-item2 p {
	margin-top:-1.75rem;
		font-size:15px;
		line-height:1.2;
		color:white;
		display:flex;
		justify-content:center;
		align-items:center;
		text-align:center;
}
.box-item2 h6 {
	margin-top:-1.5rem;
	font-size:15px;
	line-height:1.2;	
color:white;	
display:flex;
justify-content:center;
align-items:center;
	text-align:center;
}



.box-item3 {
	width:33.333%;
	max-width:1920px;
	padding-top:10.5px;	
	margin-right:4%;
} 



	  

.box-item3 h4 {	
	font-size:1.4rem;
	 font-weight:bold;
	 color:#ffd978; 
	display:flex;
	justify-content:flex-end;
   
}

.box-item3 p {
	color:white;
	margin-top:-1.75rem;
		font-size:15px;
		line-height:1.2;
	display:flex;
	justify-content:flex-end;
	text-align:center;

	
}

    now I understand flex much beter. it is easy and perfect.

    only you have to know where to place display flex and other terms.

    thanks

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘in media query 480px-769.999px I want both side to be equal with margin(opening)’ is closed to new replies.