Archived topic
Hide on mobile -> landscape - Best practices?
9 replies · Started by Matthias on June 21, 2022
hi there,
would be great if you could give me your opinion about the following:
I created a button that opens a sidebar.
For that i used 3 elements - 2 for buttons and 1 for the sidebar.
My question is about the buttons
- Button 1 is a container including a headline with icon + text
- for css it uses hide-on-mobile
- Button 2 is a container including a headline with icon
- for css it used hide-on-table hide-on desktop
Now i used some devices to test - e.g. my mobile whose screen has a resolution of 2520 × 1080 px.
In portroit button 2 appears (as wanted) - but in landscape button 1 appears (which is unwanted as it covers to much space on a small screen e.g. most of the hero-banner. Landscape view also ruins the sidebar the button opens.
I know that there are tons of different resolutions out there and you probably can't fnd a solution to fit them all and - if i understand right it is linked to the settings of mobile menu (in my case 768px)- but it would be nice to know what you would recommend for a case like that.
Link to my sandbox attached.
Hi there,
you can use some of the other @media supports.
For example, this will detect a device whose pointer is coarse ( which is the majority of touch devices ) and whose viewport is landscape and has a max-width of 926px which is the CSS viewport width of the biggest iphone:
@media (orientation: landscape) and (pointer: coarse) and (max-width: 926px) {
.your-element-selector {
display: none !important;
}
}
i am just running some tests before i go live with my page - the code above gives me a parse error when i run my page on
https://jigsaw.w3.org/
Any idea why that is? The other error i get seems to be plugin related (not gp) - so i dont know if i can do anything about it.
I get:
Parse Error },#tarteaucitronScrollbarParent::-webkit-scrollbar-track,.dsdvo-cookie-notice.style3 .dsgvopopupagbs::-webkit-scrollbar-track,.dsgvoaio_popup_policyinner::-webkit-scrollbar-track{background:0 0}
1 is an incorrect operator : opacity background border
206 Parse Error & (pointer: coarse) & (max-width: 926px) { .your-element-selector { display: none !important; } }
Hi Matthias,
May we know how you added the CSS? Can you try adding it through Appearance > Customize > Additional CSS?
Kindly let us know.
that is how it is added currently.
I read that it has some positive impact if you add the css to the child theme files - but as im currently still working on the page all css is still all added in
Appearance > Customize > Additional CSS.
A copy of all the css i currently have there:
/* General - Local Font - Add to system stack with url */
/* !! wird per wordmove nicht geändert -> ggf. in customize-> additional css lassen (dort änderung per wordmove möglich?) !! */
/* nunito-sans-regular - latin regular = 400 ; bold = 700 ; black = 900 ; Crete Round regular
*/
/* nunito-sans-regular - latin */
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
src: url('http://192.168.55.111/sandbox/wp-content/themes/acphis_child/fonts/nunito-sans-v11-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('http://192.168.55.111/sandbox/wp-content/themes/acphis_child/fonts/nunito-sans-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('http://192.168.55.111/sandbox/wp-content/themes/acphis_child/fonts/nunito-sans-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('http://192.168.55.111/sandbox/wp-content/themes/acphis_child/fonts/nunito-sans-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
url('http://192.168.55.111/sandbox/wp-content/themes/acphis_child/fonts/nunito-sans-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('http://192.168.55.111/sandbox/wp-content/themes/acphis_child/fonts/nunito-sans-v11-latin-regular.svg#NunitoSans') format('svg'); /* Legacy iOS */
}
/* nunito-sans-900 - latin */
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 900;
src: url('http://192.168.55.111/sandbox/wp-content/themes/acphis_child/fonts/nunito-sans-v11-latin-900.eot'); /* IE9 Compat Modes */
src: local(''),
url('http://192.168.55.111/sandbox/wp-content/themes/acphis_child/fonts/nunito-sans-v11-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('http://192.168.55.111/sandbox/wp-content/themes/acphis_child/fonts/nunito-sans-v11-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
url('http://192.168.55.111/sandbox/wp-content/themes/acphis_child/fonts/nunito-sans-v11-latin-900.woff') format('woff'), /* Modern Browsers */
url('http://192.168.55.111/sandbox/wp-content/themes/acphis_child/fonts/nunito-sans-v11-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
url('http://192.168.55.111/sandbox/wp-content/themes/acphis_child/fonts/nunito-sans-v11-latin-900.svg#NunitoSans') format('svg'); /* Legacy iOS */
}
/* crete-round-regular - latin */
@font-face {
font-family: 'Crete Round';
font-style: normal;
font-weight: 400;
src: url('http://192.168.55.111/sandbox/wp-content/themes/acphis_child/fonts/crete-round-v13-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('http://192.168.55.111/sandbox/wp-content/themes/acphis_child/fonts/crete-round-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('http://192.168.55.111/sandbox/wp-content/themes/acphis_child/fonts/crete-round-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('http://192.168.55.111/sandbox/wp-content/themes/acphis_child/fonts/crete-round-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
url('http://192.168.55.111/sandbox/wp-content/themes/acphis_child/fonts/crete-round-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('http://192.168.55.111/sandbox/wp-content/themes/acphis_child/fonts/crete-round-v13-latin-regular.svg#CreteRound') format('svg'); /* Legacy iOS */
}
/* vertikaler Text in Banner
* Additional CSS: has-vertical-button in Container
* is-vertical-Text in Headline-Block
*/
.has-vertical-button {
position: relative;
}
.has-vertical-button .gb-inside-container {
position: initial;
}
.is-vertical-button {
position: absolute;
left: 30px;
bottom: 40%;
transform: rotate(270deg) translateX(-50%);
transform-origin: 0 50%;
}
/*Clickable Container Block*/
.gb-container.clickable-container .gb-inside-container {
position: relative;
}
.gb-container.clickable-container a:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
}
/*Contact Forms7 Submit button*/
input.wpcf7-form-control.wpcf7-submit {
padding: 8px 65px ;
border-radius: 10px;
border-style: solid;
border-width: 2px;
border-color: var(--main-01);
}
input.wpcf7-submit {
width: 215px;
}
/*Contact Forms7 Rounded Corners*/
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
textarea {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
/*Contact Forms7 Distance between fields*/
.wpcf7 p {margin-bottom:25px;}
/*Contact Forms7 Placeholder Colors*/
input::placeholder {
color: #d94d15;
}
textarea::placeholder {
color:#d94d15;
}
/*Contact Forms7 2 Column*/
.wpcf7-form {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.wpcf7-form * {
width: 100%;
}
.wpcf7-form p:nth-of-type(3),
.wpcf7-form p:nth-of-type(4) {
max-width: calc( 50% - 5px );
}
/*WP-Swiper Customization*/
/*Positons*/
.wp-swiper .swiper-button-prev {
left: 70px;
}
.wp-swiper .swiper-button-next {
right: 10px;
}
.wp-swiper .swiper-pagination-bullets{
bottom: 10px;
width: 100%;
}
/*Colors + Size*/
:root {
--swiper-theme-color: #d94d15;
--swiper-pagination-bullet-inactive-color: #d94d15;
--swiper-pagination-bullet-inactive-opacity: .5;
--swiper-pagination-bullet-size: 12px;
/* --swiper-pagination-bullet-width: 10px;
--swiper-pagination-bullet-height: 10px;
*/
--swiper-navigation-size: 44px
}
/*Contact sidebar*/
/*sidebar buttons sticky to website*/
.sticky-sidebar-buttons {
position: fixed;
right:-1px;
top: 60%;
}
.sticky-sidebar-buttons-mobile {
position: fixed;
right:-1px;
top: 90%;
}
/*sidebar height*/
div#ocs-contact {
height: 350px;
top: 60%;
}
/*sidebar button cursor open hover*/
.sticky-sidebar-buttons:hover {
cursor:pointer;
}
/*sidebar button close hover*/
.sticky-sidebar-hover:hover {
cursor:pointer;
}
/*Gerätedetektion anhand pointer/touchscreen -> Einstellungen mobil ab x px in Landscape*/
@media (orientation: landscape) & (pointer: coarse) & (max-width: 926px) {
.your-element-selector {
display: none !important;
}
}
/*Cookie Notice*/
.dsdvo-cookie-notice.style1 div#tarteaucitronAlertBig {
bottom: unset !important;
top: 0;
right: 0;
width: 60%;
padding: 5px 15px;
margin-left: auto;
background-color: rgba(80, 89, 85, 0.9) !important;
}
.dsdvo-cookie-notice.style1 {
bottom: unset;
}
.dsdvo-cookie-notice.style1 #tarteaucitronAlertBig #tarteaucitronAccept {
float: unset;
}
/* Language switcher */
.main-navigation .main-nav ul li.wpml-ls-item a {
padding-left: 5px;
padding-right: 5px;
}
.main-navigation .main-nav ul li:nth-last-child(-n+2):before {
content: '';
position: absolute;
left: 0;
top: calc(50% - 10px);
height: 18px;
width: 1px;
background-color: #fff;
}
#generate-slideout-menu .slideout-menu {
justify-content: center;
}
#generate-slideout-menu .slideout-menu li.wpml-ls-item {
flex: 0 1;
}
@media (min-width: 769px) {
li#menu-item-wpml-ls-24-en {
padding-left: 30px;
}
}
li.wpml-ls-item a {
font-size: 18px;
font-weight: normal;
}Oops it should be and not & - fixed the CSS here:
https://generatepress.com/forums/topic/hide-on-mobile-landscape-best-practices/#post-2260266
its gone now. thx.
And did that CSS work ?
yes - thats what i meant. thx.
Glad to hear that!
