css_charlotte Posted March 14, 2023 Share Posted March 14, 2023 Hi I have duplicated my portfolio homepage to create separate work pages on my website and have managed to change the orientation of the images from portrait to landscape and change the number of columns (to create a point of difference on different pages) using the following code in the Advanced section of each page (rather than in the css section): <style> .tweak-portfolio-grid-overlay-image-aspect-ratio-34-three-four-vertical .portfolio-grid-overlay .grid-image, .tweak-portfolio-grid-overlay-image-aspect-ratio-34-three-four-vertical .portfolio-grid-overlay .grid-item { padding-bottom: 66.667% !important; } </style> <style> @media screen and (min-width:768px) { div#gridThumbs { grid-template-columns: repeat(2,minmax(0,1fr));} } </style> The work pages have adopted the same styling for hover effects (red border on hover, grayscale on hover, title on hover etc) which is what I want, however the spacing has also been adopted which means that the text on the work pages appears over the image rather than under it on hover. Homepage showing the red border and titles on hover below each homepage image: Work page (duplicated homepage/portfolio page - tweaked to change orientation and column number) which shows the project title displaying over the image: Is there a way to change the padding to the titles on hover on different portfolio pages so these appear below the image? Would this be done in the Advanced section or css section? Thank you! Link to comment
tuanphan Posted March 18, 2023 Share Posted March 18, 2023 Hi, What is your site url? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
css_charlotte Posted March 19, 2023 Author Share Posted March 19, 2023 Hi, It's https://www.workbyline.co.uk/ - let me know if you need any further access etc? Thank you! Link to comment
tuanphan Posted March 21, 2023 Share Posted March 21, 2023 On 3/19/2023 at 8:21 PM, css_charlotte said: Hi, It's https://www.workbyline.co.uk/ - let me know if you need any further access etc? Thank you! Add to Retails or Residential or Hospitality Page Header <style> .portfolio-text { position: static !important; margin-top: -20px !important; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment