- This topic has 19 replies, 2 voices, and was last updated 3 years, 8 months ago by
.
On 2 pages, I have images that doesn’t display at the same size, but the images themselves (when uploaded) are the same.
On both captures, images on the left and right should be the same size. (the bigger size that is currently displayed.
Hi @camille2421,
Thank you for your question.
The height of text in both the rows is different therefore the sizes of the images also get changed accordingly as shown in the attached screenshot.
Best regards,
Shufflehound teamBut it works perfectly in French and the height of text is also different. Is there some way to force the same height?
French page where it works: http://bono.croissanceetconfiseries.com/
There is also this page where it doesn’t work: http://bono.croissanceetconfiseries.com/en/about-us/ (the third picture)
Would you mind if I log in to your site and do quick troubleshooting? If this is ok then could you please temporarily create an admin user account and share me the account login details privately by adding them in the box having text “Enter your private content here (only you and forum moderators will be able to see it)”?
Sure, thank you.
I logged into your website and saw the images on the two shared pages are not in the same size because they are being used differently.
On the About Us page, the images are set as background images of columns and on the home page of the website it is used using image content element as shown in the attached screenshots.
Please use the images as About Us page so that it will display the same.
On the homepage, images are also used as background of columns. See attached.
The screenshot you took if for mobile only. I have a section for desktop and another for mobile.
I visited your shared site and both the images display the same size for me now on your website homepage.
Have you managed to resolve it?
No, it works only on the French Homepage, but on the English homepage + About us + À propos, it doesn’t.
I resolved it using below custom CSS code on your website.
@media (min-width: 800px){ .sh-column.sh-column-51aa556d696dd30a29214a99b8f2f5dc.fw-col-xs-12.fw-col-sm-6 { height: 525px !important; } }Thank you, it worked for the homepage.
For the About us page (EN and FR), the third image is still smaller than the first two. I tried adding another CSS code, but I am not sure how you found the “name” of the column.
Please try using below custom CSS code to achieve it.
@media (min-width: 800px){ .sh-column.sh-column-d32d97cab8f915b28e13ed91f3a5e43d.fw-col-xs-12.fw-col-sm-6, .sh-column.sh-column-8627b444c92723ae16295d3acb390f2e.fw-col-xs-12.fw-col-sm-6 { height: 560px !important; } }It worked for the French page.
Now http://bono.croissanceetconfiseries.com/en/about-us/ is the only remaining page to solve.
It is also working on that shared page.
Please test it clearing your browser cache.
All good thanks ! I just realized I uploaded the wrong sized photo.
You are always welcome here 🙂
Hi,
I changed the text next to the first image, and now the image appears smaller than the 2 following ones. Is there a way to make sure the images stays the same size regardless of the text beside it ?
No, there is no way to do that and you have to adjust the height value in the shared CSS code.
Ok. But I am not sure how to find the “name” of the column like you did previously. I am referring to this part of the CSS code:
.sh-column.sh-column-d32d97cab8f915b28e13ed91f3a5e43d.fw-col-xs-12.fw-col-sm-6, .sh-column.sh-column-8627b444c92723ae16295d3acb390f2e.fw-col-xs-12.fw-col-sm-6 Could you please help.
You have to search it into the source code of the page using browser inspect element.
If you can’t do it then you can try achieving this using the Yellow Pencil editor as described in the below page.
https://support.shufflehound.com/how-to-change-almost-any-element/
