ioeylim

Thank u for the work u do on this community. It made me wanna understand html/css so i went to learn it. You the champ

I figured it out! Instead of a media query for mobile screens, I think scaling the webpage version will cause less problems. All I need to do is export the photos again without the borders now. Thank you for helping!! @media only screen and (min-width:767px){ #page img{ transform: scale(0.75); } }

This seems to almost fix my problem! But one thing: The tranform function scales also the logo as well... is there a way to target the logo or collection block on a smaller level?

Hello?

I have an updated post here (which you've already started to look into :))

Yes that is correct. To give you a bit more explanation: There is one image at the bottom of the page that is more or less the size I'd like these images to be. However, for every other image, I have created a white border in photoshop to get the exact size and location that I want for desktop viewing and therefore the mobile version of these images are not filled like the last image.

Site URL: https://joeylim.xyz/ Hello, I'm trying to resize my images that are uploaded on to a gallery page(not block) for mobile. I have been successful using a portion of this code to resize the images on the desktop browser, however I cannot get the changes to show on mobile. Here is my code currently: @media only Screen and (max-width: 767px){ .sqs-gallery-design-stacked { transform: scale(2) !important; } } Is this an issue/limitation of my theme(wells) or am I not writing the code correctly? Help would be much appreciated, thanks!

Site URL: https://joeylim.xyz/ Hello, I'm trying to resize my images that are uploaded on to a gallery page(not block) for mobile. I have been successful using a portion of this code to resize the images on desktop/web, however I cannot get the changes to show on mobile. Here is my code currently: @media only Screen and (max-width: 767px){ .sqs-gallery-design-stacked { transform: scale(2) !important; } } Is this an issue/limitation of my theme(wells) or am I not writing the code correctly? Help would be much appreciated, thanks!

Site URL: https://joeylim.xyz/art-dubai Hello! I'm trying to change the line height for every text on my website when viewed on a mobile device. Currently, I've set the line height to 0.7em on the site style, but when viewing on a mobile device the lines overlap. I've found the code: @media screen and (max-width:767px) { h4 { line-height: 1em; } } but it's not working for me. Any ideas why?

It doesn't seem to be working, same issue across both safari/chrome and on mobile/desktop

Site URL: https://joeylim.xyz/art-dubai Hello! After using .gifs as my primary way to show multiple images on an image block, I found there to be some banding issues on higher quality/larger .gifs. So I tried a new way of uploading a .mp4 to the custom css files, and using a code block to load the video instead of a .gif. On the editing side, it seems to be working perfectly, no lag, autoplay on, and continuously looping. However when I try to load it on a separate browser(safari/chrome), the video doesn't work consistently. Even when it does, you have to manually press play to start the video. Here is the html code I used for the block: <centre> <video autoplay="autoplay" loop="true" width="100%"> <source src="video link.mp4" type="video/mp4"/> </video> </centre> Can anyone see what is the problem here? I've attached a video showing how it's supposed to work. Thanks! Joey Screen Recording 2022-04-02 at 12.02.54 PM.mov