Leti

not at all... it is the problem, since all my images have a different size, I need a code that allows each image to be full width AND adjust proportionnally in height so they are not cropped. Right now, I have this: I need this: I don't know why it works perfectly on desktop and mobile and it does this weird crop in the in-between? I know not many people are using tablets but it is going to be my professional website and if all my portfolio pictures are cropped, it is not good 😫 So it's easier for you and you don't have to go look for it again: Here is the link: https://www.pastekart.com/portfolio-projets-1/022-collection-affiches-evenements and the password: squarewebsites And I have images like this on all my portfolio pages so it is not really an option to go and target each id block and adjust manually all heights unfortunately 😣 And as I said in my original post, the command 'object-fit: contain !important' works to show the full image but then it is not full width so it has a very weird look with different gaps on each side of the images If you know a way either to adjust automatically the height or to add something to this 'fit-contain' so the image is also full width, it would be so nice. Hope it is clearer 😊 And thanks for all your help!

I didn't keep it.... but from memory, it was like: @media only screen and (min-width:480px) and (max-width:768px) { div#block-ID { min-height: unset !important; height: 30vh !important }} This worked for ONE individual image, but I can't do it for all since they all have to adjust height differently depending on each image so 30vh does not apply everywhere 😣 If you have any idea how to do it for all the pictures at the same time?? Every beginning of a solution I saw on forums is targeted to isolated images so I did not find anything useful (I am rather new at this code thing 😉)

unfortunately, no... From your previous answers to other posts, I managed to do it with block ID on each individual picture, but it is not a solution here (I have this on all my portfolio pages). If you have any idea for me to try?...

Hello, On all my portfolio pages, everything is looking good on desktop and also on mobile but there is a weird space in between that is cropping all my images 😣 (tablet view, breaking point seems to be around 765 px). Let me show you Here is the desktop: Mobile is fine as well: But when I set the screen to 750px for example: All my images are a different size so I need a code that tells the image to adjust the height, while keeping a full width after the breaking point on tablet. I tried some things but nothing works so I am looking for help. I attempted to add: @media only screen and (max-width:767px) { .sqs-block-image .design-layout-fluid .fluid-image-container .content-fill img { object-fit: contain !important; }} this way you see the whole image but it is not full width, so I have different gaps on the sides of each image -ugly 🙁- Also tried to add this code to the first one: width: 100% !important; height: auto !important; then it looks like before only it crops the image from the bottom instead of keeping it centered 😫 Here is the link: https://www.pastekart.com/portfolio-projets-1/022-collection-affiches-evenements and the password: squarewebsites If you have any idea on what to try? Any help is appreciated, thanks! 🥰

Sorry, yesterday I had to install new hardware on my computer so I was offline all day 😉 No, it is the default solution I found so you can see both arrows... I set it back to the orginial position at -50px. It was supposed to look like this: If you have one 'magic trick' of yours, would be sooo nice. Thank you for all the time you take to help others, it is really appreciated 😁🥳 Here's the code I have that was working nicely at first: /* Summary carousel arrows */ @media screen and (max-width: 767px) { .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager { bottom: 10% !important; }} .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager { float: none; width: auto; position: absolute; top: 47%; left: -50px; } .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { background-color: #FE5953; color: #fff; padding: 5px; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { background-color: #FE5953; color: #fff; padding: 5px; }

Sorry, yesterday I had to install new hardware on my computer so I was offline all day 😉 Yes, it works!!!!!! so nice, thank you 🥰 You are the best If you have a little time, I'd like to understand it better so maybe I can do it myself next time 😊 The body.collection id is pointing to the blog it calls thumbnails from, is that it? And how did you find this id? I don't see it in the inspector? ah, wait, yes, I found it, I have to point to the text inside the thumbnail and it is in the styles. Good to know 👍

Thank you! ...but since I have this block on each of my portfolio page and I am going to have a lot of them, I would rather find a solution that is not pointing to a specific block id 😣 my current CSS (if it helps) is: @media screen and (min-width:800px) { .summary-item { position: relative; img { transition: all .5s ease!important } .summary-content { position: absolute; color: #fff!important; top: 50%; left: 50%; opacity: 0 !important; pointer-events: none; transition: all .5s ease; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); } .summary-thumbnail-container { margin-bottom: 0!important; } .summary-title, .summary-metadata--primary, .summary-metadata--secondary, .summary-excerpt { color: #fff!important; font-size: 32px !important; font-family: swear-display; font-style: oblique; text-align: center; line-height: 1em }} .summary-item:hover { img { -webkit-filter: brightness(40%); filter: brightness(40%); } .summary-content { opacity: 1 !important; }}} /* pas de hover sur mobile */ @media screen and (max-width:767px) { .summary-title { display: none; }}

Sorry, since I had to fill it to post the message, I thought it was showing... Here is one project page for instance: https://www.pastekart.com/portfolio-projets-1/007-rapport-annuel-gestion-portefeuille password: squarewebsites

Sorry, since I had to fill it to post the message, I thought it was showing... Here is one project page for instance: https://www.pastekart.com/portfolio-projets-1/007-rapport-annuel-gestion-portefeuille password: squarewebsites

Hello, I have added CSS to change the arrows for a summary block... was working fine for a while but now there is a really annoying bug that I can't successfully fix 😣. I had my arrows looking like this: But now, they don't show outside the summary block: I already try to add 'z-index: 999', but it does'nt work... Only thing for now, if I don't find a better solution, is to 'push back' the arrows inside the block, like this: ...but it is not that good looking and mostly really not convenient on mobile!! Tricky to click on the right arrow or the image, since they are all in the same small block. So if everyone as any idea to help, I would love to here it 😁 My website is not online yet, here is the password: squarewebsites Thank you in advance if you can take the time to check and help 🙏😊

Hello everyone, my CSS was working fine when I last worked on my website 3 days ago... now I have this annoying bug that I can't seem to get around. At the end of each of my porfolio's projets, I have a summary block to get easy access to similar projects. I have added CSS to get the titles to show on hover with a grey background. For some reason, today, the text shows all the time 😣. My website is not online yet, here is the password: squarewebsites Thank you in advance if you can take the time to check and help 🙏😊

Site URL: https://www.raconte-moidessalades.com/mosaique Hello, I created a page to show all my posts at once... Was happy to find a way to counter the 30 limit AND have a nice looking wall of pictures by creating myself a model for 30 images that ended at the same level so I could keep going on "forever": ...only I hadn't seen yet that you could only set the summary images by width size and not a number of columns. 😥 On my rather big desktop screen (32"), it displays 6 columns, so there is weird gaps between two summary blocks (obviously) > I would like to set it at 5 if possible by adding some css And on the other hand, on mobile, it shows only 1 image per row, but since I have a lot of pictures (and it's only gonna keep growing), I would like to set it at 2 Here is how it looks with 5 per row: Not yet a full year (close though) and already 96 posts I can do really easy code (like point to a block and change the size, color or font), but this is too complicated for me. 🙄 If anyone can help with a CSS code, it would be SOOOO much appreciated: Either one code to set the desktop display on 5 columns and another for 2 columns on mobile Or maybe there is a way to simply set the minimum of columns to 2 and the maximum at 5 (let it do what it wants in between... I'm not gonna be able to control it anyway, and I don't really care -a very low percentage of viewers on tablet-) Here is the page I refer to: https://www.raconte-moidessalades.com/mosaique Also, I have a personal plan, so I can't inject code in the header of the page but only on the design page. Hopping to find a nice helper here 😁, Have a good day, Letizia