shop page (phone)

[MeesterGijs]

Hello, How do I delete some space between header and first product at shoppage on mobile device? See screenshot Thanks, Gijs

[Veronica]

This reply has been marked as private.

[MeesterGijs]

It didn't work for me... I have a Pixel 4 XL. Does that have to do with the max-width?

[Veronica]

hi I have checked with pixel 4 http://prntscr.com/25xlgy7 yes may be due to max-width try to increase the width and than check

[MeesterGijs]

It says online that the Pixel 4XL has a resolution of 1440 x 3040. But just adjusting layout and visuals based on my phone is not the best solution. How do other websites do this? I see that previous code showed these width measurements: 991, 767, 768, etc. What's the reason to choose these numbers? Please explain so I learn a bit.. Thanks! See for yourself: /* MOBIEL RESPONSIVENESS SHOPPING CART */ @media(max-width:991px){.woocommerce .cart .button[name=apply_coupon]{font-size:10px;} .woocommerce .cart .button[name=update_cart]{right:20px;font-size:10px;top:-20px}} /* MOBIEL RESPONSIVENESS CURSUSPAGINA */ @media(max-width: 991px) {.single-course.c2 .course_header #item-header-content h1{font-size: 25px !important;}} /* MOBIEL aanpassing cursupagina */ @media screen and (max-width: 767px){.course-status-featured {display:none !important;}.course_timeline{display: none !important;}} /* MOBIEL voeg tekst volgende toe in gele balk */ @media (max-width: 1280px){.unit_wrap .unit_prevnext #next_unit > span, .unit_wrap .unit_prevnext #next_quiz > span {display: inline-block;}} /* MOBIEL breedte voortgangsbalk leerlijnen */ @media (min-width: 300px) and (max-width: 400px){.single .learningpath .progress { width: 115% !important;}} @media (min-width: 400px) and (max-width: 600px){.single .learningpath .progress { width: 112% !important;}} @media (min-width: 600px) and (max-width: 700px){.single .learningpath .progress { width: 103% !important;}} @media (min-width: 700px) and (max-width: 900px){.single .learningpath .progress { width: 107% !important;}} /* MOBIEL menu streepjes terug */ #trigger span.lines, #trigger .lines:after, #trigger .lines:before {background: #3f3f3f !important;} /* MOBIEL cursuspagina cursusinfo niet door feature image maar eronder */ @media(max-width:768px){div#item-header-content{margin:0 !important;}} /* MOBIEL cursuspagina verwijder breadcrums en titel cursus */ @media (max-width: 768px){div#item-header div#item-header-content ul.breadcrumbs {display:none !important;} div#item-header div#item-header-content h1{display:none !important;} ul.topmenu li a.smallimg.vbplogin{padding-bottom:5px !important;} section#title .course_header {padding-bottom:0px !important;} .single-course div#item-header-content div#item-meta {grid-template-columns: 25% 25% 1fr !important;text-align: center;} .single-course div#item-header-content div#item-meta strong {font-size: 12px !important;font-weight: 500;}} /* MOBIEL winkel layout, teveel breedte op telefoon en toevoegen aan winkelmand knop liep over volgende product afbeelding */ @media(max-width:991px){.products img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {padding:0px 10px 0px 10px !important;} @media(max-width:991px).woocommerce ul.products li.product a img{margin-top:55px !important;}} /* MOBIEL profielpagina menu gaat niet door subnav results heen */ @media(max-width:991px).bp-user.p2 #buddypress div.item-list-tabs#object-nav li .flexMenu-popup, .bp-user.p3 #buddypress div.item-list-tabs#object-nav li .flexMenu-popup, .bp-user.p4 #buddypress div.item-list-tabs#object-nav li .flexMenu-popup{ z-index: 100 !important;} /* MOBIEL profiel menu weer zichtbaar */ @media(max-width:991px).bp-user #buddypress .item-list-tabs ul li:first-child:last-child {display: block;}

[Veronica]

this is the max width @media(max-width:869px){ .shop_products.content.padder { margin: 0px; } } min and max width for pixel 4xl 412 x 869

[MeesterGijs]

this is the max width @media(max-width:869px){ .shop_products.content.padder { margin: 0px; } } Meaning? Max width for mobile devices?

[Veronica]

max width for pixel pixel 4xl so it should work with other mobile devices too

[Author]

Posts