I want to make left space between menu icon and logo stable from 260px- 600px ?

  • Resolved johannes999

    (@johannes999)


    1 year, 7 months ago

    hallo,

    I am bussy now to write media queries .

    I set first media query to max 520px just to see how it looks as layout.

    I see a problem with spacing between the hamburger menu and the logo . when I open the homepage on 280px in inspect element it looks good the space betweeen the icon and the logo . I tried first % but as the width grow the blank space growed too so I have changed % to pixels.

    but now it is beter than % but still when I go from 280 to 520px the space between those 2 elements changes to narrower. it is not stable which has to be !

    as I said I tried flex with % it didn’t helpt .

    I have just tested international famous website and when I opend it in inspect element in any resolution between 240 to 600 there was no devation. the space between the menu icon and the logo is stable.

    this is my css code :

    @media (max-width: 520px)  { 
		.flex-container {
	width:100%;
   height: 120px;
  position: fixed;
  top:0;
  left: 0;  
	z-index:9999;
	display:flex;
	flex-direction:column;
	background: linear-gradient(to top, #4b5054 0%,#4b5054 50%,#45accb 50%, #45accb 100% );

}
	.flex-container-section1 {
		width:100%;
	  margin-top:0.4rem;
	
	}

	
.navigation {
  padding-left:4%;
  
}

	.menu {
position:fixed;
width:37.5px;
height:37.5px;
padding-top:-0.2rem;

}


	
	.logo {	

	font-size:14px;
	color:#ffd978;
	padding-left:60px;
	padding-top:0.6rem;
	}

	.info2 {
		display:none;
		
	}

	.info3{
		display:none;	
		
		
	}
	.flex-container-section2{
		width:100%;
		display:flex;
		flex-direction:row;
		
	}
	
	
	.item-menu-name {	
		display:flex;
		justify-content:flex-start;
		font-size:12px;
		color:#ffd978;
		margin-left:4.5%;
		margin-top:0.25rem;
	}	
	
	.flex-container-section3 {
		width:100%;
		display:flex;
		flex-direction:row;
		
	}
	
	



	.info4 {
		width:96%;
		display:flex;
		justify-content:flex-start;
		margin-left:4%;
		color:white;
		font-size:14px;
		margin-top:0.6rem;
	}
	
	.info5 {
		display:none;
		
	}
	
	.info6{
		display:none;
		
	
	}
	
	.flex-container-section4 {
		width:100%;
		display:flex;
		flex-direction:row;
		
	}
	
	.info7 {
		width:96%;
	display:flex;
	justify-content:flex-start;
	line-height:1.2;
	font-size:14px;
	color:white;
	margin-left:4%;
	}
	
	.info8 {
	display:none;
	
	}
	
		.info9 {
		display:none;
	
	}
}

    how I can solve this problem . what I have to do to let the margin between menu icon and logo to be stable from 260 to 600 for example?

    I think myself the % wil not help , I don’t know I want your advice to solve this problem?

    thanks

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator bcworkz

    (@bcworkz)

    The spacing changes because you have the nav hamburger’s left padding as a dynamic % and the logo left padding as static px. Make them both static px and they will not move around with different display widths. Right now your media query is up to 520px max, not 600px. Over 520px a different set of rules comes into play.

    The flex layout is only applied to the immediate children of .flex-container. The elements within flex-container-section-1 are not using the flex model. Ideally, a flex model should layout automatically on its own. You should try to intervene as little as possible, and only by providing general clues like row or column layout. A well implemented flex layout should only need minimal media queries, such as going from row to column for phones.

    Thread Starter johannes999

    (@johannes999)

    thank you,

    I know that I have set to max 520px, I am just testing to see untill which size I have to set the first media query for mobile.

    I asked untill 600px as an example.

    thanks for your advice about % and pixels . I wil correct it to pixels.

    thanks also about your advice about flex layout.

    section1 or section2 I use it in place of row . in place of usung row I am using section1 section2 etc. to make coding unique

    I want to know only is this section1 or 2 or 3 wil cause problem when I use it in place of row?

    or I have to use row ?

    thanks

    Thread Starter johannes999

    (@johannes999)

    thanks ,

    for all usefull information.

    Moderator bcworkz

    (@bcworkz)

    I want to know only is this section1 or 2 or 3 wil cause problem when I use it in place of row?

    or I have to use row ?

    Using a row is fine for larger displays, but the elements often don’t have enough room on narrow mobile screens, so you’d want the elements to rearrange into a column at some point, whether it is 520, 600, or 400 wide, it is up to you.

    If you want various elements to shrink or grow in relation to screen size, the flex model is a good choice. You can use a media query to switch from row layout to column layout. For flex, you just change the container’s flex-direction: property. You can emulate flex behavior using percentage distances and float properties, but it’s more cumbersome.

    If you need elements to always be in the same relationship and not shrink or grow, use fixed distances and static or relative display properties.

    Since you can nest elements within another, you can use each approach where it makes the most sense. You’re already doing this with section1, 2, etc. Those are flex elements that can shrink and grow. The menu and icon text are nested into section1 and once you use pixel dimensions for both, will always have a fixed relationship within section1.

    Thread Starter johannes999

    (@johannes999)

    thanks

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘I want to make left space between menu icon and logo stable from 260px- 600px ?’ is closed to new replies.