CODEWITHSUNDEEP
htmlcssreactjsimage
Mounir
Mounir

Reputation: 155

why my image makes the website's width scrollable in CSS?

As you can see in the image bellow, I have a simple design element as an image, but I only want to show half of it in the edge,but moving it to the right makes the website scrollable on small devices which is weird. how can I simply cut the image if it overflows the device's width please?

I have this HTML code a child div of the "about__content" class:

   <div className="about__cards">
     <article className='about__card'>
       <!-- stuff-->
     </article>

     <img src= {shape3D} className='shape3D_about' alt="3d design "/>
   </div>

now here are the "about__content" class that contains all of previous code, the "about_cards" class, and the class of the image "shape3D_about" (for small device version):


   .about__content {
        text-align: left;
        font-size: 90%;
        max-width: 400px;
    }


 .about__cards {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

 .shape3D_about {
        position:absolute;
        top: 1400px;
        width: 400px;
        right: -100px;
        -webkit-transform: scale(-1);
        transform: scale(-1);
  
    }

could anyone please spot the problem? thanks a bunch.

enter image description here

Upvotes: 1

Views: 31

Answers (1)

Nandu Jasthi
Nandu Jasthi

Reputation: 86

Please add overflow: hidden to the parent div of image, It will be hidden in div and scroll will not be visible. Also try adding max-width: 100% to image so that it will be 100% maximum in any device

Upvotes: 1

Related Questions