Hello, and thank you very much for this support forum.
My website is: https://www.themavenmethod.com
My website is using the Portfolio feature of the Shapely theme. This works great on desktop. I modified it to display as 3 columns on desktop using the following CSS:
@media (min-width: 990px)
{
#shapely_home_portfolio-6 .col-md-3.masonry-item.project
{
width: 33%;
position: static !Important;
}
}
However on mobile (iPhone 11), I have a couple issues:
- On mobile, each tile is displayed in its hover state (silver gradient from top to bottom), shown here:
as opposed to normal (pure black) on desktop. I wonder if this is a clue to the second, more important problem below:
- When I rotate the phone from portrait to landscape, the portfolio tiles display perfectly (pure black), in 2 columns. However, when I rotate the phone back to portrait, only 3 tiles are displayed upon resizing, and they are displayed in their hover state, as described in problem #1. In addition, if you look carefully as the phone is being rotated back & forth, there is a quick flickering, and actually looks as though the 3 missing portrait tiles are hidden under the top 3 prominent tiles.
I would appreciate ANY insight you may have into these issues. Thank you kindly.