From that screenshot it looks like the css is missing for the new modals. (The css that I put at the end of the css panel. )
If you are talking about your live or local version then make sure the css is validated and error free.
Or does the codepen have the same problem? I’m only on a mobile tonight so I’ll check back tomorrow.
Well for starters the links need to be not links, or else have their actions halted, because everything but the main room’s link tries to send you to a different url.
everything works very well my steps on chrome
sorry I did not understand ?
Good evening,
I would like to do the same with the menus, I tried the problem is that I receive #myOverlay1 once I close the window.
I tried simply by indicating the class #myOverlay1 in the link
How should I do it ?
<div class="overlay overlay--menu">
<ul class="menu">
<li class="menu__item menu__item--current"><a class="menu__link" href="#myOverlay1">Nos
services</a>
</li>
<li class="menu__item"><a class="menu__link" href="#myOverlay1">Conseil</a></li>
<li class="menu__item"><a class="menu__link" href="#">Nos clients</a></li>
<li class="menu__item"><a class="menu__link" href="#">Contact</a></li>
</ul>
</div>
That link is working both in Chrome and Mozilla and ios so I’d need to see the actual code where it doesn’t work 
As I said above if you have a typo then one browser may react differently to another depending on how they error correct so check validation of the code first (css and htm).
I do note that in your codepen demo you have posted the doctype and head code twice so I hope you haven’t done that in your real page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D Art - Motion</title>
</head>
<body>
<!-- Start of Coding... -->
<!DOCTYPE html>
All the code above the second doctype should not be there.
You can’t use that id as that content is in the slides and only visible when the slides are active.
Make a new id and place the overlay in the header exactly as shown in this codepen or it will not appear on top. I suggest you use a solid background this time to cover up the existing overlay.
Note that it is generally consider bad practice to open a modal from within a modal but will depend on use case I suppose.
In fact I had Doctype twice.
Thank you I will try it for my menu.
It works great thank you.
I’m busy making the menu and I don’t know why it doesn’t take my css into account, maybe I’m using it wrong?
I’m trying to place an image on the left and the text on the right of the image, is that correct? and reduce the size of the image.
<div id="myOverlayMenu2" class="my-overlay mo2">
<div class="inner">
<p class="flotte">
<img src="images/videoframe_13075.png" alt="NFT Annime" />
</p>
<p>
Toutes les nouveautés, rien que des nouveautés.
</p>
</div>
<a class="close-modal" href="#">X</a>
</div>
CSS
.flotte img {
float: left;
width: 200;
height: 200;
}
It’s not working because you’ve got the image inside a paragraph, which is a block level element. block level elements are 100% width by default.
Unless you need the text to wrap around the image, you could do it easily using flex and less markup.
<div id="myOverlayMenu2" class="my-overlay mo2">
<div class="inner flotte">
<img src="images/videoframe_13075.png" alt="NFT Annime" />
<p>
Toutes les nouveautés, rien que des nouveautés.
</p>
</div>
<a class="close-modal" href="#">X</a>
</div>
.flotte { display: flex; }
.flotte img {
max-width: 200px;
aspect-ratio: 1/1;
}
Sample in action
Thank you for your help and your very clear answer, I didn’t really know about the blocks.
I just tested and I got this as a result and I added a h1 and a p and it doesn’t work the text is shifted.
I need to change something in the css or add something?
You’re changing the target here as the H1 wasn’t there before. It’s getting put in there because that’s what display: flex basically does - it removes all the block elements and makes them inline-blocks, so they’ll stack neck to each other.
How EXACTLY do you want it to look like? You need to figure that out and then see how you’re going to lay it out.
I tweaked my example to have a float and flex example, with a heading on each of them. Added longer text to see how they behave Take notice to how the markup is slightly different within the divs. If you use the flex markup, you can control the widths text a bit more using flex-grow and/or flex-shrink appropriately.
This is what I would like. The problem is that if I use the .div in the css like you, my entire website is impacted, how can I resolve this?
Thank you for your help
??? What is what you’d like?
I gave you two examples on how to handle the image and the text - one using flex and one using floats - to show you how the two behaved differently, and how the markup needed to be.
The only reason your entire site would be affected would be if you copied my html and css from the codepen directly, and that’s because I used the generic div and h1 selectors there for simplicities sake. If you don’t want all divs to be affected, then change the div selector in the html to use a class instead, and add the class to your html.
Or add a wrapping div around the html and apply that css if it’s in the wrapper. Not my preferred method since it’s extra markup but it would work.
Some of this is going to be you playing a bit to see how this stuff works so you can learn and re-apply it in different situations.
Thank you for your answer I will test everything.
thank you for your explanations
In my html I have this code that I would like to adapt to your css?
<div id="myOverlayMenu2" class="my-overlay mo2">
<div class="inner">
<h1>Comment vendre des NFT quand on est artiste ?</h1>
<div class="flotte">
<h1>Flex example</h1>
<div class="flex">
<img
src="https://images.pexels.com/photos/276267/pexels-photo-276267.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porttitor vehicula placerat. Ut feugiat gravida
congue. Sed suscipit, mauris eget tristique ultrices, dolor nunc ullamcorper justo, sit amet porttitor nibh enim
ut erat. Fusce vehicula odio nisl, nec viverra nunc cursus eget. Fusce ultrices lectus non tempor mattis. Nulla
molestie, nibh iaculis interdum dictum, erat eros vulputate justo, molestie volutpat augue felis ac sapien.
Morbi id elit ac velit tempus convallis non in quam. Nullam imperdiet ante eu aliquet elementum. Cras ut lectus
consequat turpis feugiat vestibulum. Sed vel est id metus viverra mattis. Suspendisse in tellus sit amet sem
lobortis porta at a tortor. Sed lacinia ante ipsum, id lacinia elit scelerisque eget. Aenean faucibus, ipsum in
tristique maximus, lacus nunc tincidunt orci, at posuere risus nisi quis ex. Curabitur sit amet iaculis quam.
</p>
</div>
</div>
<a class="close-modal" href="#">X</a>
</div>
I would think it’d be something like this
<div id="myOverlayMenu2" class="my-overlay mo2">
<div class="inner">
<h1>Comment vendre des NFT quand on est artiste ?</h1>
<div class="flex">
<img src="https://images.pexels.com/photos/276267/pexels-photo-276267.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porttitor vehicula placerat. Ut feugiat gravida congue. Sed suscipit, mauris eget tristique ultrices, dolor nunc ullamcorper justo, sit amet porttitor nibh enim ut erat. Fusce vehicula odio nisl, nec viverra nunc cursus eget. Fusce ultrices lectus non tempor mattis. Nulla molestie, nibh iaculis interdum dictum, erat eros vulputate justo, molestie volutpat augue felis ac sapien. Morbi id elit ac velit tempus convallis non in quam. Nullam imperdiet ante eu aliquet elementum. Cras ut lectus consequat turpis feugiat vestibulum. Sed vel est id metus viverra mattis. Suspendisse in tellus sit amet sem lobortis porta at a tortor. Sed lacinia ante ipsum, id lacinia elit scelerisque eget. Aenean faucibus, ipsum in tristique maximus, lacus nunc tincidunt orci, at posuere risus nisi quis ex. Curabitur sit amet iaculis quam.</p>
</div>
</div>
<a class="close-modal" href="#">X</a>
</div>
I wanted to use your codepen:https://codepen.io/davemaxwell/pen/xxobpyY
my problem is that the css is not good because the div impacts everything else on the site and I can’t do the css
Hence why I told you that you’d need to do some playing so you could understand how these things work. Just copy/pasting code is not the way to learn how they work and you’d know how to apply it to other situations.
But, for this case, working from the example code I gave you, you’ll want to add a new class
<div id="myOverlayMenu2" class="my-overlay mo2">
<div class="inner comment">
<h1>Comment vendre des NFT quand on est artiste ?</h1>
<div class="flex">
<img src="https://images.pexels.com/photos/276267/pexels-photo-276267.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porttitor vehicula placerat. Ut feugiat gravida congue. Sed suscipit, mauris eget tristique ultrices, dolor nunc ullamcorper justo, sit amet porttitor nibh enim ut erat. Fusce vehicula odio nisl, nec viverra nunc cursus eget. Fusce ultrices lectus non tempor mattis. Nulla molestie, nibh iaculis interdum dictum, erat eros vulputate justo, molestie volutpat augue felis ac sapien. Morbi id elit ac velit tempus convallis non in quam. Nullam imperdiet ante eu aliquet elementum. Cras ut lectus consequat turpis feugiat vestibulum. Sed vel est id metus viverra mattis. Suspendisse in tellus sit amet sem lobortis porta at a tortor. Sed lacinia ante ipsum, id lacinia elit scelerisque eget. Aenean faucibus, ipsum in tristique maximus, lacus nunc tincidunt orci, at posuere risus nisi quis ex. Curabitur sit amet iaculis quam.</p>
</div>
</div>
<a class="close-modal" href="#">X</a>
</div>
Then the css becomes this (trimmed out to only show the flexed version). NOTE: If you have the flex class in your css from some other source, then you’ll need to rename it to something else and reflect it in the html and css the same way.
.comment > div, .comment > h1 {
max-width: 50%;
margin: 0 auto;
}
.comment > div {
margin: .5rem auto;
outline: 1px solid red;
padding: 2rem;
}
.flex {
/* these two lines needed for the image on left and text on right */
display: flex;
gap: 5rem;
align-items: center;
}
.flex img {
width: 200px;
height: 200px;
}
great thank you for your help and explanation