I’m getting into a bit of a mess with:

1. Hiding the admin bar by user role – including custom ones created using permissions pro;
2. Hiding the admin bar by media query (and not leaving the white space behind!);
3. Media queries themselves and appropriate breakpoints for mobile landscape & portrait and tablet landscape & portrait (one of the things I am looking to do is to hide the toolbar on a mobile landscape version of a user logged in to the front-end.

Crucially, I don’t want to lock down the access, just hide the view of it. I am using Elementor Pro but I would politely encourage you to stop and think twice before suggesting this post is in the wrong forum because, essentially, it is WordPress core functionality that I am trying to target (allbeit that I am trying to put the rules into Elementor’s Site Settings custom css area.

I have tried applying:

html #wpadminbar {
margin-top: 0rem !important;
display: none;
}

or

head { margin-top: 0;

}

and no joy with either.

Also, noticeably, the breakpoints currently in place affect both portrait and landscape view on mobiles. I was trying to hide the WordPress toolbar on mobile landscape view, and, for further reference, with and without being defined by the user role logged in.

Thanks ever so much for your time regardless of if you can help

Well done, thank you, and keep up the great work, Very Best Wishes!!!!

I have tried using a row of blocks and two columns. On the whole I have had better success with the columns. In rows, as soon as the browser windows was resized, the logo image would start resizing with it until it was proportionally all wrong. I now have it in two columns and have tried using media queries to center the content, but, although the words will center, the logo image stays beligerently on the left. Looking in the Inspector for the page, the css mentions flex (flexbox?), but I don’t know how I can influence this, if it is the thing that is preventing what I want to do. Perhaps I have some settings wrong, but I cannot find them. Please can anyone point me in the right direction?

The current media query on the header is

@media only screen and (max-width: 940px) {
.headcolumns, .headercolumn, .headerlogo, .headertitle {
text-align: center!important;
}

Thank you

I have finished this website but suddenly I see 1 problem.

when you go to inspect element and open only the page contact and go to 361px untill about 440px. you see that animation text is deviating downwards.

I checked contact-page.php everything is OK.

I have looked in css but I could’t see any clue.

it is working in every positions .it is only causing on contact page and only between and from 361 to about 440px .

I don’t know if you can see much beter than me . I have checked everything but I couldn’t find any wrong?

thanks

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

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

u can see tablet mode in getting shown. @media tags are not working correctly i guess,

now decrease browser zoom to 80% and see switched to destop.

someone pls find solution, its happening only on homepage, i’m using generatepress theme. not changed any theme code or plugins code.

no new installed plugins in recent period.