Part of website not mobile Friendly

Support
#1

Hi, Parts of my website with the x theme is not responsive. The main banner on the home page is cut off and the shop page, aligns to the left rather the to the centre. Please advise how to fix this. Thank you.

#2

Hello @TinyLewy,

Thanks for asking. :slight_smile:

Can you please share website URL for us to take a closer look?

Thanks.

#3

Thank you. https://www.honestlynatural.com.au

#4

Hi There,

As your website is under construction please provide the credentials so we can take a closer look…

Thanks

#5

Sorry the website is live now.

#6

Hey Nonie,

Regarding your home page banner / slider, please try the Auto Slider Layout. Here’s the guide to setup a responsive slider from ThemePunch.

Regarding your shop page, it looks like you’re using a WooCommerce category shortcode in a page? X does not currently have responsive styles for WooCommerce shortcodes. You should follow the standard WooCommerce setup which is choosing categories to display in your shop. To do that, go to WooCommerce > Settings > Display and choose Show categories in Shop page display.

Then, set the number of columns in Appearance > Theme Options > WooCommerce > Shop.

Thanks.

#7

Hi these were already set up as you stated above and the shop is still aligned left on a mobile phone.

#8

Hi,

You can try adding this in Theme Options > CSS

@media (max-width: 979px)
.woocommerce .cols-3 li.product:nth-child(2n+3),
.woocommerce .cols-4 li.product:nth-child(2n+3), 
.woocommerce.columns-3 li.product:nth-child(2n+3), 
.woocommerce.columns-4 li.product:nth-child(2n+3) {
    clear: none;
}

Hope that helps

#9

This code didn’t appear to fix this issue up.

#10

Hi,

Sorry, there are missing brackets.

Please change it to this.

@media (max-width: 979px) {
.woocommerce .cols-3 li.product:nth-child(2n+3),
.woocommerce .cols-4 li.product:nth-child(2n+3), 
.woocommerce.columns-3 li.product:nth-child(2n+3), 
.woocommerce.columns-4 li.product:nth-child(2n+3) {
    clear: none;
}
}

Thanks

#11

So close, looks great but the product names are still large and slightly cut off.

#12

Hi There,

Please also add this custom CSS:

@media (max-width: 767px){
    .woocommerce li.product .entry-header h3 {
        font-size: 16px;
    }
}
@media (max-width: 480px){
    .woocommerce li.product .entry-header h3 {
        font-size: 14px;
    }
}

Hope it helps :slight_smile:

#13

Thank you, is there an easy way to have 4 columns on the desktop and 2 on a mobile and have them more centred and bigger.? Also how can a buy it now button under the photo but above the product name on the mobile and computer?

#14

Hi,

You can add this in Theme Options > CSS

.woocommerce .cols-3 li.product.last, .woocommerce .cols-4 li.product.last, .woocommerce.columns-3 li.product.last, .woocommerce.columns-4 li.product.last {
    margin-right: 0; 
}

.woocommerce li.product {
    float: none;   
    margin: 0 5px 60px !important;
    padding: 0;
    max-width: 100%;
    display: inline-block;
    width: 22% !important;
}

@media (max-width: 979px){   
.woocommerce li.product {
     width: 48% !important;
}
}

Hope that helps.

#15

It’s now only showing in one column to the left on a mobile now, how can i put them in 2 columns but centered?

#16

Hello there,

Please add this CSS code:

@media (max-width: 480px ) {  
.owl-carousel.owl-drag .owl-item {
       width: 50% !important;
    }
}

Hope it helps.

#17

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.