Desktop and Mobile view category photos

Hey bemodesign,

Thank you for the inquiry.

We may need to inspect the site in order to provide the appropriate modifications. Please provide the site URL in the private field and the link to the category page.

Best regards,
Ismael

Hi,

Thank you for the info.

Did you add the following css code? The images get stretched because of it.

.avia-image-container .avia_image, .avia-image-container .avia-image-overlay-wrap {
    height: 200px !important;
    width: 400px !important;
    margin: 20px 0 0 0 !important;
}

To adjust the width of the columns in mobile view for this specific section, try applying a unique ID to the Color Section in the Advanced > Developer Settings > Custom ID field (for example: bc-custom-section). Then, add this css code:

#top #bc-custom-section div .flex_column {
    width: 50% !important;
    margin-left: 1%;
}

Best regards,
Ismael

Hi,
To add a border radius to the images in #bc-custom-section for bothe desktop and mobile, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #bc-custom-section div .flex_column a.avia_image {
	border-radius: 30px;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,

Thanks for the screenshot.

The css code above should have worked. Please try this again:

#top #bc-custom-section div .flex_column img {
    border-radius: 30px;
}

Best regards,
Ismael

Hi,

Last thing, on mobile view, how can I get space between the images? (see attached)

Please update the previous css code:

#top #bc-custom-section div .flex_column {
    width: 46% !important;
    margin-left: 3% !important;
    border-radius: 30px;
}

Best regards,
Ismael

Hi,

Did you add another css media query for mobile view?

@media only screen and (max-width: 768px) {
   /* Add your Mobile Styles here */
}

Simply include the css rules that you want to be applied on mobile view within an existing css media query. You don’t need to add another one.

Best regards,
Ismael

Hi,

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael