tomalexander96

Update! Just found a website that spits out responsive embed code for you. Check it out! https://iframely.com/try

Here is my page, BTW! https://www.tomalexanderart.com/web-design

Hey Tuan, what script code would you use to move an embeded block into a collage? Trying to embed my Figma site in a way that it'll be responsive on mobile. BTW, just wanted to say that you're awesome. Almost every time I come to one of these forums I see you answering. Thank you so much for all you do, and all the help you've given me personally!

I'm trying to similarly shrink a section on mobile, but the 20vh height isn't doing very much. Tried switching it to 0px and it barely made a dent, which was strange. Tuan, do you have any ideas? Site: https://www.lupoarms.com password: lupo CSS: .image-swap img{ position: absolute; height:auto; } .image-swap img { display: block; left: 50%; transform: translateX(-50%); } .image-swap img:nth-child(1) { z-index: 1; transition: .5s; } .image-swap img:nth-child(1):hover { opacity:0; } #block-yui_3_17_2_1_1641240410508_1657 { display: block; margin: 0 auto; width: 50%; } .container { background-color: #ff5733; width: 100%; height: 100%; margin: 0 auto; /*overflow: hidden;*/ } /*phone shrink*/ @media screen and (max-width:1200px) { [data-section-id="61d080f38e186f78e93ae953"] { min-height: 0px !important; } } /* Change dropdown menu background */ .header-menu-nav-item { background: #000000; }

Tuanphan, you are the best!

Did a little more work and got it a little better. Still not quite centered, though, and looks horrible on mobile. Updated CSS: .image-swap img{ position: absolute; height:auto; } .image-swap img{ display: inline-block; margin-left: center; margin-right: center; text-align: center; } .image-swap img:nth-child(1) { z-index: 1; transition: .5s; } .image-swap img:nth-child(1):hover { opacity:0; } #block-yui_3_17_2_1_1641240410508_1657 { display: block; margin: 0 auto; width: 50%; } .container { background-color: #ff5733; width: 100%; height: 100%; margin: 0 auto; /*overflow: hidden;*/ }

Hey guys! I'm trying to do something similar to this again and running into some weird issues. Site: https://www.lupoarms.com Password: lupo I think that some of the CSS I wrote managed to break the .gif elements out of the code box, as they refuse to center without being pushed around with padding (which I want to avoid for mobile optimization) and also spill over into the footer. Any ideas? My CSS: /*my code*/ .image-swap img{ position: absolute; height:auto; } .image-swap img{ display: block; margin-left: center; margin-right: center; } .image-swap img:nth-child(1) { z-index: 1; transition: .5s; } .image-swap img:nth-child(1):hover { opacity:0; } #imageCenter { padding-left: 110px; padding-bottom: 400px; }

tuanphan, you are the best! This worked perfectly.

Hi tuanphan! Thank you so much for your help! This code worked perfectly, but only for the homepage of my site for some reason. On any other page, the transition doesn't fade out, it just turns off abruptly. Do you have any idea why that might be happening? For reference, the image at the bottom of this page that says "Crushed Skate Shop" fades in, but doesn't fade out: https://www.tomalexanderart.com/contracts-1 Thank you so much!

Does anyone know how to make this overlay smoothly transition upon hover? I've managed to make it transition in by adding a "transition: 1s;" rule, but when the mouse is moved it does not transition back smoothly, just goes back to normal immediately. Here is my site, and the page in question: https://www.tomalexanderart.com/gallery-2 Thank you for any help!