Set breakpoint for mobile or tablet - Support | Kriesi.at

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

Author

Posts

May 20, 2022 at 8:47 pm #1352466

Hi,
I have searched online and in your forum, but I cannot find the right answer. Breaking point on for example a iPad Mini with 768×1024 and actually for all mobile devices.. How do you set the right breaking point? Which width or height do I use?

I have e.g. found the CSS code:

@media only screen and (max-width: 1177px) {
nav.main_menu {
display: block !important;
}
#avia-menu .menu-item {
display: none;
}
.av-burger-menu-main.menu-item-avia-special {
display: block;
}
}

How do I set the right code for this website: https://zehavi-gallery.com

Thanks in advance!
Greetings,
Arjan

May 21, 2022 at 8:48 pm #1352511

Mike

Moderator

Hey Arjan,
Thanks for the link to your site, please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

@media only screen and (min-width: 767px) and (max-width: 1100px) {

		/*header*/		
		.responsive #top #wrap_all #header {position: relative; width:100%; float:none; height:auto; margin:0 !important; opacity: 1; min-height:0;}
		.responsive #top #main {padding-top:0 !important; margin:0;}
		.responsive #top #main .container_wrap:first-child{ border-top:none; }
		.responsive.html_header_top.html_logo_center .logo { left: 0%; -webkit-transform: translate(0%, 0); -ms-transform: translate(0%, 0); transform: translate(0%, 0); margin:0; }
		
		
		.responsive #top .logo{position: static; display:table; height:80px !important; float:none; padding:0; border:none; width:80%; }
		.responsive .logo a{display:table-cell; vertical-align: middle;} 
		.responsive .logo img{height:auto !important; width:auto; max-width: 100%; display: block;  max-height: 80px;}
		.responsive #header_main .container{height:auto !important; }
		.responsive #top .header_bg { opacity: 1; filter: alpha(opacity=1); }
		.responsive.social_header .phone-info {text-align: center; float:none; clear:both; margin:0; padding:0;}
		.responsive.social_header .phone-info span{border:none; width:100%; text-align: center; float:none; clear:both; margin:0; padding:0;}
		.responsive #header_meta .social_bookmarks li{ border-style:solid; border-width:1px; margin-bottom:-1px; margin-left:-1px;}
		.responsive #top #header_meta .social_bookmarks li:last-child{border-right-style: solid; border-right-width:  1px;}
		.responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul{float:none; width:100%; text-align: center; margin:0 auto; position: static;}
		.responsive #header .social_bookmarks{padding-bottom:2px; width:100%; text-align: center; height:auto; line-height: 0.8em; margin:0;}
		.responsive #header_meta .sub_menu>ul>li{float:none; display: inline-block; padding: 0 10px;}
		.responsive #header .social_bookmarks li{float:none; display: inline-block;}
		.responsive.bottom_nav_header #header_main .social_bookmarks{ position: relative; top: 0; right: 0; margin: 10px auto; clear:both;}
		.responsive.bottom_nav_header.social_header .main_menu>div{height:auto;}
		.responsive .logo img{margin:0;}
		.responsive.html_header_sidebar #top #header .social_bookmarks{display:none;}
		.responsive body.boxed#top, .responsive.html_boxed.html_header_sticky #top #header{max-width: 100%;}
		
		.responsive.html_header_transparency #top .avia-builder-el-0 .container, .responsive.html_header_transparency #top .avia-builder-el-0 .slideshow_inner_caption{padding-top:0;}
		.responsive #top .av_phone_active_right .phone-info.with_nav span{border:none;}
		
		.responsive #top #wrap_all .av_header_transparency .main_menu ul:first-child > li > a, 
		.responsive #top #wrap_all .av_header_transparency .sub_menu > ul > li > a, 
		.responsive #top .av_header_transparency #header_main_alternate, 
		.responsive .av_header_transparency #header_main .social_bookmarks li a,
		.responsive #top #wrap_all .av_header_transparency .phone-info.with_nav span,
		.responsive #top .av_header_transparency #header_meta, 
		.responsive #top .av_header_transparency #header_meta li,
		.responsive #top #header_meta .social_bookmarks li a{ color:inherit; border-color: inherit; background: inherit;}
		.responsive.html_top_nav_header .av-logo-container{height:auto;}
		.responsive.html_top_nav_header .av-section-bottom-logo{border-bottom-style: solid; border-bottom-width: 1px;}

/*new mobile*/
		.responsive .av-burger-menu-main{display: block;}
		.responsive #top #wrap_all .main_menu{top:0;height:80px;left:auto;right: 0;display: block;position: absolute;}
		.responsive .main_menu ul:first-child > li a { height: 80px; line-height: 80px;}
		.responsive #top .av-main-nav .menu-item{display:none;}
		.responsive #top .av-main-nav .menu-item-avia-special{display:block;}
		.responsive #top #wrap_all .menu-item-search-dropdown > a { font-size: 24px; }
		.responsive #header_main_alternate{display:none;}
		.responsive #top #header .social_bookmarks{display:none;}
		.responsive #top #header .main_menu .social_bookmarks{display:block; position: relative; margin-top: -15px;}
		.responsive #top .av-logo-container .avia-menu{height:100%;}
		.responsive #top .av-logo-container .avia-menu > li > a{line-height: 80px;}
		.responsive #top #main .av-logo-container .main_menu{display:block;}
		.responsive #top #main .av-logo-container .social_bookmarks{display:none;}
		.responsive #top #main .av-logo-container .main_menu .social_bookmarks{display:block; position: relative;}
		.responsive #top #main .av-logo-container .main_menu{display:block;}
		.responsive #top #header_main > .container .main_menu  .av-main-nav > li > a,
		.responsive #top #wrap_all .av-logo-container {height:80px; line-height:80px; }
		.responsive #top #wrap_all .av-logo-container {padding:0;}
		.responsive #top #header_main > .container .main_menu  .av-main-nav > li > a{
			min-width: 0; padding:0 0 0 20px; margin:0; border-style: none; border-width: 0;
		}
		.responsive #top .av_seperator_big_border .avia-menu.av_menu_icon_beside{border-right-style: solid; border-right-width: 1px; padding-right: 25px;}
		.responsive #top #header .av-main-nav > li > a, .responsive #top #header .av-main-nav > li > a:hover{
		background:transparent;
		color: inherit;
		}
.html_cart_at_menu.html_header_sidebar #header_main .avia-menu {
    margin-top: 0px;
}
.responsive.html_header_sidebar #header .avia-custom-sidebar-widget-area .widget {
  display: none;
}
.html_header_sidebar #menu-item-shop.cart_dropdown {
    right: 80px;
    border: none;
    margin-top: 15px;
}
.html_header_sidebar #header .container {
	width: 85%;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

May 21, 2022 at 9:19 pm #1352512

ArjanDenHaag

Participant

Hi Mike,

Thanks!! My goodnes.. A lot of css. I never could have come up with this one. I have appllied it. Looking much better! But maybe still one question? The social icons are now not visible and the Gtranslate flags are not visible. Is it possible to show them in the menu? If not, I put them elsewhere.

Thanks in advance,
Greetings,
Arjan

May 21, 2022 at 9:28 pm #1352513

ArjanDenHaag

Participant

Hi Mike,

A follow-up.. I just did notice: the social icons in the footer are not visible now. Is there a way to solve that one?

Thanks in advance,
Greetings,
Arjan

May 21, 2022 at 11:41 pm #1352516

Mike

Moderator

Hi,
Glad to hear, the social icons didn’t show in the mobile header, you are using the sidebar header so if you show them are are not really in a good location, you can test with this css:

@media only screen and (min-width: 767px) and (max-width: 1100px){
.responsive.html_header_sidebar #top #header #wrap_all .social_bookmarks {
    display: block;
}
}

The Gtranslate flags happen to show under the header, you can use this css which adjusts the burger menu down a little:

@media only screen and (min-width: 767px) and (max-width: 1100px){
.responsive.html_header_sidebar #header .avia-custom-sidebar-widget-area #gtranslate-4 {
    display: block;
    padding: 0;
    border-top-width: 0px;
    text-align: center;
}
.responsive #top #wrap_all .main_menu {
    top: 22%;
}
}

When I check I see the social icons in the socket, please check again

Best regards,
Mike

Author

Posts

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

You must be logged in to reply to this topic.