- This topic is empty.
-
AuthorPosts
-
April 4, 2019 at 9:39 am #285922IMPACTMagParticipant
Hi,
I’m pretty novice at hard coding HTML and CSS and am building most of our site through templates and visual composer in WordPress. I’ve stumbled into a bit of an issue that I think can be fixed with some basic custom CSS, but I’m in over my head.
http://www.forge32.com/digital-editions/
Each row of magazines has 3 columns. The images are set to contain so the full magazine is shown and bits don’t get cut off. The problem is that when you hover, the overlay color goes outside of the image. This happens on both the sides and top, depending on your screen size. Is there something I can do to the image or column (both?) to avoid this?
Thanks in advance!
April 4, 2019 at 11:10 am #285925Paulie_DMemberThe image is the wrong size for the container I would suggest.
Changing
contain
tocover
seems to fix the overlay issue.April 4, 2019 at 11:46 am #285927IMPACTMagParticipantContain fixes the overlay issue.
What would you suggest for getting the image to be 100% height/width within the column space?
I’ve adjusted the September/October 2018 cover to COVER and duplicated a CONTAIN version of it to show the difference. When scaling up or down responsively it crops the cover instead of keeping it in proportion.
April 6, 2019 at 10:11 am #286010DagnyParticipant^^ can you share some screenshots to better understand what you are looking to fix ?
April 8, 2019 at 11:29 am #286063IMPACTMagParticipant^ Definitely.
A. 1 row, 3 columns, each image set to ‘contain’. Overlay appears to attach to column size, not image and resizes based on responsive layout size.
Samples:
Regular desktop size – https://www.screencast.com/t/N8xJ8CxHtS
Tablet size – https://www.screencast.com/t/KqAReTiqDUt0B. 1 row, 3 columns, first image set to ‘cover’. The publication gets cropped on both top and sides. This defeats the purpose of having a magazine cover as the image IMO.
Samples:
Regular desktop size – https://www.screencast.com/t/ocQAs5SYd
Tablet size – https://www.screencast.com/t/GDmJMG6qIdeally I want to keep the proportions of the cover to not cut off content. The actual scale or size of the images doesn’t matter to me as long as they fit within the columns.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.