BradleyK

Thanks Tuanphan! That worked!

Hello, I'm trying to add an animated gradient or gradation to one specific section just below the header on my homepage. The code I'm using below does not target the specific section, and has little effect on the size of the animated background which also repeats in other sections. /*Animated CSS Gradations*/ .section, .section-background, .section-border { background: linear-gradient(45deg, #d9570e, #5b7857, #aed4a9, #3396ac, #7d31a8); background-size: 2000px 1160px; -webkit-animation: AnimationName 30s ease infinite; -moz-animation: AnimationName 30s ease infinite; animation: AnimationName 30s ease infinite; } @-webkit-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } I am trying to create an animated gradient which is 2000px wide x 1160px tall much like what appears as an animated GIF on my current homepage which is here: https://ivesgrafik.com/

Hi Tuanphan, I solved it with this code, although the text appears in the center of the portfolio grid item. @media screen and (max-width: 1000px) { .portfolio-grid-overlay .grid-item .portfolio-text { opacity:1 !important } .portfolio-overlay { height: 30% !important; margin: auto !important; bottom: 0 !important; opacity: .65 !important; } .portfolio-text { margin: auto !important; } } This is not a hover effect, but is an acceptable solution to confining the transparent white overlay to 1/3 of the portfolio grid height. Thanks for your help.

Hello tuanphan, I found this code to have an effective animated gradation; however, the gradation appears in every section of my homepage, https://ivesgrafik.com /*Animated CSS Gradations*/ .section, .section-background, .section-border { background: linear-gradient(45deg, #d9570e, #5b7857, #aed4a9, #3396ac, #7d31a8); background-size: 1000% 500%; -webkit-animation: AnimationName 30s ease infinite; -moz-animation: AnimationName 30s ease infinite; animation: AnimationName 30s ease infinite; } @-webkit-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } I'd like to confine the above code to one top section of the homepage, and confine the dimensions of the animated gradation to 2000px wide x 1500px tall, with the ability to add text on top of the animated gradation. Thanks.

Thank you Tuanphan. That worked.

How do i vertically center or align text within a transparent white overlay in landscape view on mobile device? This is the code I'm currently using for a 1/3 transparent white overlay with black text overlay. The code with "padding: 10px 70px !important;" forces the text to two lines of copy in vertical display mode on a mobile device. However, when I rotate the view of the mobile device to landscape view, the single line of text aligns 10px from the bottom of the transparent white overlay. I would like the single line of copy to be centered vertically within the transparent white overlay. See attached examples of what it is currently displaying, and an example of what I would like to achieve. /*Mobile Portfolio 1/3 Overlay*/ @media screen and (max-width: 1000px) { .portfolio-grid-overlay .grid-item .portfolio-text { opacity:1 !important } .portfolio-overlay { height: 30% !important; top: unset !important; bottom: 0 !important; opacity: .7 !important; } .portfolio-text { justify-content: flex-end !important; padding: 10px 70px !important; } } Thank you.

Thank you tuanphan, This worked for the "Services" section, but I'm having difficulty locating the section-id codes for "Client Experience" on this page: https://ivesgrafik.com/studio I'd also like to reduce the section padding on "Featured Work", "Featured Products", and "Follow IvesGrafik on Instagram" found on this homepage: https://ivesgrafik.com/ I'm guessing these require more section-id codes, and need to be applied one by one. Brad

Hi tuanphan, The example would be the animated GIF at the top of the page that reads: "Crafting brands that resonate and inspire" — I would like this text as it appears, centered over the animated gradation background which is approximately 2000px x 1500px. Here is my homepage with the animated GIF gradation I would like to convert to a CSS animated gradation background: https://ivesgrafik.com/ Thank you for your help.

Thanks for your help with this. It worked, but how can I animate it and confine the animated gradation to a 2000px x 1500px rectangle with a white text overlay?

Yes please. Thank you for your help.

I resolved this by placing images in Classic Edit Sections which proved to be more responsive than Fluid Engine Sections.

I'm trying to replace the Karmina Sans letters "f" and "i" with the "fi" ligature. Please reference this page of my site where the "fi" ligatures are to appear: https://ivesgrafik.com/studio I've attached examples of the Karmina Sans ligature screenshots. I've tried copying and pasting the Karmin Sans ligature into the text block. A ligature appears; however, it's not the correct font. Thanks.

I am trying to adjust the margin or padding of a section in 7.1. Please reference this page: https://ivesgrafik.com/studio I've attached a screenshot. The gradated line GIF is in it's own section. I'm trying to decrease the top and bottom margin or padding. Thanks.

Currently, I'm using an animated GIF.

How can I add an animated gradation to my homepage approximately 2000px wide x 1000px tall? https://ivesgrafik.com/