amethystwallgallery
-
Posts
11 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by amethystwallgallery
-
Haha sorry that it was a bit of an ordeal to start working on 😅 That works perfectly, thank you so much! I can work around using just that aspect ratio no problems at all, I'm just so glad to have a solve so thank you again!
-
You have to make the window less than 768px wide by shrinking it, like emulating what a mobile phone screen size:
-
The gallery is on the initial page when you enter my site, when the window is 768px or less so it only appears on mobile. The images are all the same portrait ratio at the moment yes, would it be problematic if I put in different portrait ratio images in the future?
-
site: https://www.amethystwallgallery.com/ pass: Help123! Hi, On the mobile version of my site, I have a fullscreen gallery with portrait images on my homepage. Whatever the size of device (or window, while I'm working on the site on desktop), there is some degree of crop on the width of the image. I am trying to make it so that the full height and width of the portrait images are uncropped (so the image size scales with screen size while keeping it's intended aspect ratio) but I cannot figure out the right way to do this with CSS. I have managed to do it for a landscape gallery on the desktop version of my site, but yeah I cannot figure out doing the same for a portrait gallery for some reason. Please help me, much more capable people! Below is an example: The one on the right is still slightly cropped but much less so than the one on the left.
-
The hover works as intended on desktop, but still sticks on mobile even if I use @media (hover: hover) I believe I have the basic commerce package so Javascript should be available to me, what code should I use? I am even more unfamiliar with Javascript. If possible I would like a pure CSS fix but that is down to my desire to use just one code language, for no other reason than it would be very satisfying haha
-
Yeah I am aware of this, maybe I haven't worded it right, I have autism so communication isn't my strong point : / Basically: I'd like to have CSS code so that a :hover effect (to 0.5 opacity) that is limited only to hover-supported versions of my site On devices where hover is NOT supported, I would like to have an :active effect (to 0.5 opacity) instead. Kind of like emulating the :hover effect of the desktop site, but just for the duration of a touch event, like when someone taps a screen. Is this possible to code in?
-
site: https://www.amethystwallgallery.com/ pass: Help123! On the "CONTACT" page of my site, I have included an "Add File" button in the contact form using this script: When hovering over said button, I would like the cursor to match what happens when I hover over all the other links on my site (the pointy finger hand one) instead of staying as the standard cursor model. I cannot work out how to do this, please help!
-
site: https://www.amethystwallgallery.com/ pass: Help123! The target for this solve is the "Add To Cart" button found in any product item in the store. I am trying to have a :hover effect only on the desktop version of my site, and an :active effect on the mobile version of my site, without using pixel breakpoints. With my limited experience with CSS, I have tried a couple of things such as: I have also tried without a media query: In both cases, the button functions as intended on desktop but I still get sticky hover on mobile. I have reached my knowledge limit with CSS, please enlighten me!
-
site: https://www.amethystwallgallery.com/ pass: Help123! In an empty cart, I would like to have the "Continue Shopping" button fade to 0.5 opacity when I hover over it, but I can't for the life of me figure out the right combination of selectors to use to actually target it. Any help would be much appreciated! Bonus points if my hero @tuanphan could weigh in! 😅
