Return to previous page

Fit the image to the square or adjust the content to make the image look perfect

This topic has 6 replies, 3 voices, and was last updated 4 years, 9 months ago ago by Olga Barlow

  • Avatar: Michael
    Michael
    Participant
    August 21, 2020 at 23:18

    My problem is as follows, I used the following code to make it the way I want it, since I had to improvise because of wpbakery is buggy

    .carousel-area .product-slide {
    max-height: 300px;
    display: flex !important;
    width:250px !important;
    bottom:5px;
}
.carousel-area .product-slide a.button{
    display:none;
}

    The problem is that the image was being swallowed, I removed the button to see if it resolves, but it didn’t help much, how would I do to make the image dynamically adjusted to the square, or how would I do to readjust it all to have a better visibility?

    Problem print: https://prnt.sc/u3qvd8

    Note: it is not on the site, because of this problem in the image.

    #248840 Copied Theme version: 6.3.9.2 WooCommerce version: 4.4.1
    5 Answers
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    August 24, 2020 at 09:47

    Hello,

    First of all, could you, please, clarify if you want to crop images or not? Because if you agree to crop images then you can set the necessary proportion (in your case 1:1) in the Theme Options > WooCommerce > Product images > save settings and regenerate thumbnails. If you don’t want to crop images then choose uncropped in the settings and add the following code

    .content-product .product-content-image img {
    max-height: 300px;
    width: auto;
}
.content-product .product-image-wrapper {
    display: flex;
    align-items: center;
    min-height: 300px;
}

    Regards

    #249041 Copied
    Avatar: Michael
    Michael
    Participant
    August 24, 2020 at 22:24

    The images still cut, I chose not to crop, but the visualization is better and I was able to launch the site, now you can do code testing to help me in this regard, in the mobile version it is not so pleasant anymore.

    Link website for test: http://makobaby.com.br/

    #249094 Copied
    Avatar: John Holden
    John Holden
    Participant
    August 25, 2020 at 04:57

    Hi,

    The images are looking fine on mobile, please check again https://prnt.sc/u5braz

    Regards,
    Hung PD

    #249106 Copied
    Avatar: Michael
    Michael
    Participant
    August 26, 2020 at 13:35

    is on the carousel, shows some correct photos, others do not, and also shows only 1 product at a time, I wanted to show 2 to 3 on the cell phone, even though it is small, it would just have to be visible

    #249417 Copied
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    August 26, 2020 at 17:06

    Hello,

    Have you regenerated images after changes of the image options in Customizer? You can use the Regenerate thumbnails plugin for these purposes.

    To change the number of slides per view for the devices edit the element settings http://prntscr.com/u6bpa1

    Regards

    #249478 Copied
  • Viewing 6 results - 1 through 6 (of 6 total)

The issue related to '‘Fit the image to the square or adjust the content to make the image look perfect’' has been successfully resolved, and the topic is now closed for further responses

Recent Community Activity

Helpful Topics

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Poster – WooCommerce Theme
lazy-placeholder
Spice Store – WordPress WooCommerce Theme
lazy-placeholder
Photographer – WordPress WooCommerce Theme
lazy-placeholder
Online Courses – WordPress WooCommerce Theme
lazy-placeholder
Grocery Mega Market – WordPress WooCommerce Theme
lazy-placeholder
Hotel – WordPress Theme
lazy-placeholder
Organic Store 02 – WordPress WooCommerce Theme
lazy-placeholder
Landing Watch – WordPress WooCommerce Theme
lazy-placeholder
Lifestyle Blog – WordPress WooCommerce Theme
lazy-placeholder
Beauty – WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.