2 products per row on mobile !!

Hello @headwaters,

You can replace the above code with this for a better result:

@media screen and (max-width: 546px){
.entry-content .woocommerce .row .product:not(.col-xs-12) {
    flex: none;
    width: 50%;
}}

Hope that helps.

Thank you.

Wow, @soumendra

It worked.
A big thank you
You are a blessing to many of us on this thread.

Hello,

It’s my pleasure helping you all.

Please let me know if you need anything else.

Thank you. ??

Hi @soumendra

Thanks for the other day, i really appreciate.

In response to your question that If I need anything else, i should let you know.

I have an issue with Notification Bar covering up/blocking Menu when site is viewed on mobile. Whereas, it’s not so on Desktop.

Visit the site both on desktop and mobile, you will see that the FREE SHIPPING notification bar covers the menu and other elements of the header

You can also see the difference in the screenshots https://ibb.co/fsF56S and https://ibb.co/cJKRD7

So i want to to help me with CSS rule or anything to make the menu and other parts of the header to be visible and unblocked.

Thank you very much

Hello @headwaters,

Sorry for the late response.

I cannot access your site: https://prnt.sc/ii5m3h

Please fix that and let me know so that we can check the issue for you.

Thank you.

Hi @soumendra

Sorry about that, i had issue with the Hosting provider at that time, The site is back active now. Please check thedemosite.online

Hello @headwaters,

You can try adding this CSS to your Custom CSS for adjusting that:

#page {
    padding-top: 25px;
}
@media screen and (max-width: 786px){
.site-header {
    margin: 0px;
}
.jet-mobile-menu-toggle-button {
    margin-top: 51px;
}
.mobile-panel {
    height: 54px;
}}
@media screen and (max-width: 397px){
#page {
    padding-top: 48px;
}
.jet-mobile-menu-toggle-button {
    margin-top: 73px;
}}

Hope that helps.

Thank you.

Hi @soumendra

Below is the your rule i modified to get the perfect view i wanted. Thanks a lot because it’s your rule i built on

Now works. Thanks. I appreciate.

@media screen and (max-width: 786px){

#page {
padding-top: 0px;
}
.site-header {
margin: 45px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.jet-mobile-menu-toggle-button {
margin-top: 50px;
}
.mobile-panel {
height: 65px;
bottom: 264px;
padding-bottom: 0px;
top: 45px;

}}
@media screen and (max-width: 397px){
.site-header {
margin: 52px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#page {
padding-top: 0px;
}
.jet-mobile-menu-toggle-button {
margin-top: 52px;
}
.mobile-panel {
height: 65px;
bottom: 264px;
padding-bottom: 0px;
top: 45px;

}}

Hello @headwaters,

Yes, it’s always suggested that you can adjust the code as per your requirement.

I am glad you find my help useful.

Thank you.

Hi @soumendra Sam (@soumendra)
I know you have been busy but would really appreciate if you can solve mine as well.
Website – oopanda.com
Tried all the codes before asking you for help. Mine seems to be different than others.

Thnaks!

Hello @shubh16489,

You can add this CSS to your Custom CSS/ Additional CSS for adjusting that:

@media screen and (max-width: 464px){
.col-xs-6.product {
    width: 50%;
}}
@media screen and (max-width: 657px){
.box-title .price {
    clear: left;
    width: 100%;
    float: left;
    position: relative !important;
    text-align: center !important;
}
.stats-container .title-product {
    width: 100%;
    text-align: center;
}}

Hope that helps.

Thank you.

Wow @soumendra !
Worked like a charm.
Thanks a lot!

Hello @shubh16489,

It’s a pleasure helping you.

Feel free to ask if you need anything else.

Thank you. ??

Hi Sam, Looks like you’ve been super helpful with this. I went through the entire thread and tried all the codes previously listed and they did not work for my site.

The following code pushes all of the images to the left in 1 column half the page, but it doesn’t display a 2nd column on the right:

@media screen and (max-width: 770px){
.woocommerce .products .product {
width: 50% !important;
}}
@media screen and (max-width: 661px) and (min-width: 340px){
.woocommerce .products .product {
min-height: 390px;
}}

My page is: https://redeadstock.com/beta/

TY in advance!

Hello @dondada79,

Hope you are doing well today.

As I explained above, the other codes may not work for you because all the sites are having different codes in them.

However, you need to add this CSS to your Custom CSS/ Additional CSS for adjusting that:

@media screen and (max-width: 770px){
.woocommerce .products .product {
    width: 100% !important;
}}
@media screen and (max-width: 482px){
.woocommerce .products .tcol-ss-12.kad_product {
    width: 50%;
    float: left;
    position: relative !important;
    top: 0 !important;
}}

Hope that helps.

Thank you.