Not responsive for smartphones

[orlane_azogui]

Hi,

I have an issue with the responsiveness of my website on tablets and smartphones. I attached a few screenshots so you can see :

• mainmenuiphone : the header is way too big there’s a large space between the logo and the metaslider, I’d like to reduce it. Also you can see that the metaslider is clearly not responsive and I’d like to know how to fix this.
• bijoumenuiphone : the categories on the top “bagues”, “boucles d’oreilles”, “bracelets”, “colliers” don’t appear all in a responsive way and same thing for others categories of the main menu (maroquinerie and décoration)
• mainmenuonipad : on the tablets, the photos for the categories are enormous as you can see the difference with the size of the header, it’s quite unaesthetic and not really user-friendly so I’d like to know how to reduce the size of the images
• categoriesonipad : see the screenshot : when I’m on the “bijoux” page, the pictures for the subcategories take all the space so it doesn’t look good at all.

Can you please help with all these responsiveness issues ?

Thank you very much,

Best,

Orlane

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Orlane,

1. After resize browser you need to refresh. if you view on real device the white space is less. Please edit the row wrap slider and edit column http://prntscr.com/hbano1 to remove space on top.

Because height of your slider short you need add custom css in Claue > Theme Option > General Layout > Custom CSS

@media only screen and (max-width: 414px) {
.metaslider .slides img {
width: auto;
height: 160px;
max-width: inherit;
}}

2. You should drag to view the categories

3. I saw you edit homepage it now 3 columns of categories

4. Where is the screen shot? I not found this.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[orlane_azogui]

Hello,

1. Ok, will try with this code.
2. No we can’t drag for this … Please take a look again at the second screenshot to see what we mean. “Bagues” is croped. We saw this on a computer with iphone view and we refreshed the cash.
3. Yes we have 3 different categories but why are the photos of the categories so big ?? It is quite strange on iPhone and iPad.
4. it’s the last screenshot (screenshot with “bracelet” and a big photo of a girl)

Thanks,

Best regards,

Laurie

[Harry]

Hi,

2,  Please add custom css in Claue > Theme Option > General Layout > Custom CSS

@media only screen and (max-width: 736px) {
.shop-top-sidebar .product-categories {
margin-left: 10px;
}}

3.  On ipad it still display 3 columns on a row so these categories image small, when you view on iphone it change to 1 column so the image will auto resize to fit column

4. You can reduce size of image by add custom css

@media only screen and (max-width: 736px) {
.sub-categories .jas-col-xs-12 {
-ms-flex-preferred-size: 50%;
-webkit-flex-basis: 50%;
flex-basis: 50%;
max-width: 50%;
}

.product-category h2, .jas-banner h3 {
font-size: 12px;
min-width: 100px;
}

}

Best regards

 

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[orlane_azogui]

Hello,

1. For the size of the metaslider, I tried as you told me this code :

@media only screen and (max-width: 414px) {
.metaslider .slides img {
width: auto;
height: 160px;
max-width: inherit;
}}

Its looks good for the first image of my slider but I don’t know why the size of the other two images have not changed (See screenshot metaslider).

 

 

The other issues are solved !

 

Thanks a lot for everything Harry,

 

Best regards,

 

Laurie

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

Please try with new code

@media only screen and (max-width: 414px) {
.metaslider .flexslider .slides img {
width: auto;
height: 160px;
max-width: inherit;
}}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[orlane_azogui]

Hello,

Now it’s bigger for every slide but the pictures have moved toward the right … See my screenshot.

Thanks in advance,

Best,

Laurie

Attachments:

You must be logged in to view attached files.

[orlane_azogui]

Hello,

Have you seen my message ?

Thanks a lot,

Laurie

[Harry]

Hi Laurie,

Yes, the image height bigger to cover the texts but it will be move to right. If you want it center the height will be small not cover the texts

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[orlane_azogui]

Hello,

So there is no way I can have it the same size for each picture AND center ?!

 

[Harry]

Hi,

I help you fixed this. Please check

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[orlane_azogui]

Hello,

It looks great now.

Thanks a lot,

Laurie

[Author]

Posts