Image size

[jerome projetti]

I use the CutsNStyle Pro theme with WooCommerce plugin.
I have the following problems:

(1) In a article with an introduction photo with a small size: the display is OK on a computer, however on a mobile the picture width is forced to 100%, which is not good for me (see ex: http://bettypassion.fr/wordpress/journee-de-beaute-toulousaines/)

(2) Now in a page it is the opposite, for ex if I use a small introduction photo (like the one for the service page, as you propose in your model). See at URL http://bettypassion.fr/wordpress/ in section 2, just below the welcome section. I have the following behavior: when I open the page the picture width is forced to 100% which is again not what I want. Do you have a solution to configure the auto width ?

(3) I don’t think it is specific to the theme, maybe you can help me. When I display a list of WooCommerce products on a widget it is a little bit confusing, do you know if it is possible to add a white space between each product? See URL http://bettypassion.fr/wordpress/prestations/

Thank you for your help.
Regards,
Jérôme

[Sonl Sinha]

Hi,

Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

Add this code there:

1. Answer

@media screen and (max-width:479px) {
.blog-post-repeat .post-thumb img { width:50%; margin:0 auto; display:table;}
}

3. Can you send us the screenshot? Upload your screenshot on imgur.com and paste the share url here.

3. Answer

.product_list_widget li img {display: block !important; margin:0 0 20px !important;}
.product-title {display: block !important; padding-bottom:10px !important;}

Regards,
Dave

[jerome projetti]

Hello Dave,
Thanks for your quick reply.
I have copied the code you have proposed in the CSS custom box but it is the same behaviour.
You will find at http://imgur.com/a/lt1MN the screenshots (2 for question 1, 2 for question 2 and 1 for question 3). I have already provided the links to the website under test in my first message.
Jérôme

[Sonl Sinha]

Hi,

I am not sure what you mean by this. Can you may be draw or point out in an image?

You can upload image in imgur.com and share the link here.

Regards,
Dave

[jerome projetti]

In fact question 1 is solved (it was necessary to check on a real mobile rather than just changing the size of the window on a computer..)

Some precisions about question 2: when I click on a service in the welcome page (see http://bettypassion.fr/wordpress/page-d-exemple/) the picture is very big, it is like the width is forced to 100% (there is a resize and I would prefer to have an auto height but I don’t know where to change this setting). You have the screenshot at URL http://imgur.com/a/lt1MN.

For the product list the CSS code you have proposed change a bit the display but I still have a “superposition” on the two products (see http://bettypassion.fr/wordpress/prestations/ right side)

Thanks again for your help!
Regards
Jérôme

[Sonl Sinha]

Hi,

Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

Add this code there:

2. Answer

.innerbanner { height:600px; overflow:hidden;}

3. Answer

.product_list_widget li img { width:20% !important; height:auto !important; float:left !important; margin-left:20px;}

Regards,
Dave

[jerome projetti]

Hello again,
I have some other questions:

For the service page provided in the CutsNStyle Pro theme I use a photo (size is 1400×568 and the thumbnail is a perfect square 540×540) Unfortunately in the welcome page the background image on the button is not a square, how can I change that? See page: http://bettypassion.fr/wordpress/ (you just have to scroll down to reach the 3 services button).

Do you know what is the shortcode to have the google map and the contact field?
Thank you
Jérôme

[Sonl Sinha]

Hi,

Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

Add this code there:

.services-thumb { overflow:hidden;}
.services-col .services-thumb img { width:200%; max-width:200%;}

For Google map and contact form check this link below:
http://sktthemesdemo.net/documentation/skt-cutnstyle-doc/#page-templates

Regards,
Dave

[Author]

Posts