Want to keep the Review image size large ( Dawn Theme )

[dreamtechzone_5]

Hello Everyone!

I have added the review section through coding. (1) I don't want to keep the white space on the right side of the image. (2) I want to keep the image size large. I have added the image below, and I want to keep it like this. (3) I noticed one thing, when I zoom in, the size of all other sections is decreasing but the size of the review section is not decreasing. Although the size of this section is correct on the laptop, its size is larger than the other sections on the PC. I want to keep the height of all sections the same on PC, laptop, mobile and tablet. Please help me. Thank you.

Store: https://urbanglowingstore.myshopify.com/

Password: Admin

ref Website: https://bleame.com/

When I zoom

Want to keep it exactly like this image (1)

(3)

[Mustafa_Ali]

img.review-image {
    width: 100% !important;
}

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the <style> tag before the body ----->
if this code work please do not forget to like and mark it solution

[dreamtechzone_5]

I have pasted the code but it is not working.

[dreamtechzone_5]

customer review css file:

.customer-reviews-section {
padding: 40px 20px; /* Default padding for larger screens */
text-align: center;
min-height: auto; /* Ensure no fixed height, grows with content */
width: 100%;
box-sizing: border-box;
}

.reviews-header {
margin-bottom: 10px; /* Base value for mobile */
}

.rating-stars {
display: inline-block;
margin-bottom: 2px;
}

.star {
font-size: 24px;
}

.rating-value {
font-size: 18px;
margin-left: 10px;
color: #333;
}

.reviews-count {
font-weight: bold;
color: #333;
margin-top: 0;
}

.reviews-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px; /* Base value for mobile */
margin-bottom: 20px; /* Base value for mobile */
position: relative;
}

.review-card {
background: #fff;
border-radius: 8px;
padding: 12px 45px; /* Base padding (maintained from previous adjustments) */
text-align: center;
width: 100%;
box-sizing: border-box;
}

.review-image-container {
width: 100%;
margin-bottom: 12px; /* Base value for mobile */
aspect-ratio: 4 / 3; /* Maintain aspect ratio */
display: flex;
align-items: center;
justify-content: center;
}

.review-image {
width: 60%; /* Base value for mobile */
height: auto;
border-radius: 4px;
max-width: 100%; /* Ensure image doesn’t overflow */
}

.review-title {
font-weight: bold;
margin-bottom: 6px; /* Maintained from previous adjustments */
}

.review-text {
margin-bottom: 12px; /* Maintained from previous adjustments */
}

.reviewer-info {
display: flex;
align-items: center;
justify-content: center;
}

.client-image {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}

.reviewer-details {
display: flex;
flex-direction: column;
align-items: center;
}

.reviewer-name {
font-weight: bold;
}

.verified-buyer {
font-size: 12px;
color: #666;
}

.read-all-reviews {
margin-top: 15px; /* Base value for mobile */
}

.slider-dots {
display: none;
margin-bottom: 10px;
}

.slider-dot {
display: inline-block;
width: 10px;
height: 10px;
background: #ccc;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}

.slider-dot.active {
background: #333;
}

.read-all-button {
display: inline-block;
padding: 10px 20px;
border: 1px solid;
border-radius: 4px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for hover effect */
}

.read-all-button:hover {
background-color: {{ section.settings.button_color }};
color: {{ section.settings.button_background_color }};
border-color: {{ section.settings.button_color }};
}

/* Responsive Adjustments for Different Screen Sizes */
@media (min-width: 1200px) {
/* Large desktops */
.customer-reviews-section {
padding: 20px 20px;
}

.reviews-header {
margin-bottom: 0 !important; /* Reduced from 2px to 0 to minimize space above the image */
}

.reviews-grid {
gap: 10px !important; /* Maintained from previous adjustments */
margin-bottom: 10px !important; /* Reduced from 20px to 10px to reduce space above the Read More button */
}

.review-card {
padding: 12px 45px !important; /* Maintained from previous adjustments */
}

.review-image-container {
margin-bottom: 5px !important; /* Reduced from 12px to 5px to minimize space below the image */
}

.review-image {
width: 80% !important; /* Increased from 60% to 80% to reduce empty space on the right (and left) */
}

.review-title {
margin-bottom: 6px;
}

.review-text {
margin-bottom: 12px;
}

.read-all-reviews {
margin-top: 5px !important; /* Reduced from 15px to 5px to reduce space above the Read More button */
}
}

@media (min-width: 769px) and (max-width: 1199px) {
/* Tablets and smaller desktops */
.customer-reviews-section {
padding: 35px 15px;
font-size: {{ section.settings.desktop_font_size }}px;
}

.reviews-header {
margin-bottom: 0 !important; /* Reduced from 2px to 0 to minimize space above the image */
}

.reviews-grid {
gap: 5px !important; /* Maintained from previous adjustments */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
margin-bottom: 10px !important; /* Reduced from 20px to 10px to reduce space above the Read More button */
}

.review-card {
padding: 12px 40px !important; /* Maintained from previous adjustments */
}

.review-image-container {
margin-bottom: 5px !important; /* Reduced from 12px to 5px to minimize space below the image */
}

.review-image {
width: 85% !important; /* Increased from 70% to 85% to reduce empty space on the right (and left) */
}

.review-title {
margin-bottom: 6px;
}

.review-text {
margin-bottom: 12px;
}

.read-all-reviews {
margin-top: 5px !important; /* Reduced from 15px to 5px to reduce space above the Read More button */
}

.star {
font-size: 20px;
}

.rating-value {
font-size: 16px;
}
}

@media (max-width: 768px) {
/* Mobile devices */
.customer-reviews-section {
padding: 30px 15px;
font-size: {{ section.settings.mobile_font_size }}px;
}

.reviews-grid {
display: flex;
overflow: hidden;
width: 100%;
position: relative;
}

.review-card {
flex: 0 0 100%;
display: none;
padding: 12px 20px; /* Maintained from previous adjustments */
}

.review-card.active {
display: block;
}

.review-image {
width: 100%;
}

.review-image-container {
margin-bottom: 12px;
}

.review-title {
margin-bottom: 6px;
}

.review-text {
margin-bottom: 12px;
}

.star {
font-size: 18px;
}

.rating-value {
font-size: 14px;
}

.slider-dots {
display: block;
}

.mobile-only {
display: block;
}
}

@media (max-width: 480px) {
/* Very small mobile devices */
.customer-reviews-section {
padding: 25px 10px;
}

.reviews-grid {
gap: 10px;
}

.review-card {
padding: 10px 15px; /* Maintained from previous adjustments */
}

.review-image {
width: 90%;
}

.review-image-container {
margin-bottom: 10px;
}

.review-title {
margin-bottom: 5px;
}

.review-text {
margin-bottom: 10px;
}

.star {
font-size: 16px;
}

.rating-value {
font-size: 12px;
}

.read-all-button {
padding: 8px 16px;
}
}