CODEWITHSUNDEEP
htmlcssimageresizeresponsive
Rubain Riyam
Rubain Riyam

Reputation: 79

how t omake images resize with screen size with a nice design

so I am developing a site so in a section element with some text and images the images are breaking down into some ugly designs so I want it to be in I particular design this is the code if you run it a resize it and then see the images it comes to some random design

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>]
    <style>
        #section2img1 {
            width: 100px;
        }

        #section2img2 {
            width: 100px;
            padding-left: 129px;
        }

        #section2img3 {
            width: 100px;
            padding-left: 129px;
        }

        #section2img4 {
            width: 100px;
            padding-left: 129px;
        }

        #section2img5 {
            width: 100px;
            padding-left: 129px;
        }

        #section2img6 {
            width: 100px;
            padding-left: 129px;
        }
    </style>
</head>

<body>
    <div id="section2">
        <h3 id="text1section2">Lorem, ipsum.Lorem ipsum dolor sit.</h3>
        <p id="text2section2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum</p>
        <img src="/img/SECTION2/WEB_DEVELOPMENT-removebg-preview.png" alt="error" id="section2img1">
        <img src="/img/SECTION2/MOBILE_APP_DEVELOPMENT-removebg-preview.png" alt="error" id="section2img2">
        <img src="/img/SECTION2/COUSTOMER_PRODUCT_DEVELOPMENT-removebg-preview.png" alt="error" id="section2img3">
        <img src="/img/SECTION2/SEO___SMO-removebg-preview.png" alt="error" id="section2img4">
        <img src="/img/SECTION2/WEB_DESIGN-removebg-preview.png" alt="error" id="section2img5">
        <img src="/img/SECTION2/E-COMMERCE_SOLUTIONS-removebg-preview.png" alt="error" id="section2img6">
    </div>
</body>

</html>

the link of the images

https://drive.google.com/drive/folders/1wQHGuoKuFk0fa-9upqiqmAk62ClOVAUS?usp=sharing

please help me

Upvotes: 0

Views: 28

Answers (1)

tomasantunes
tomasantunes

Reputation: 945

You can use Bootstrap to make your layout responsive. It has a 12 column system and you have 6 images so each image takes up two columns. You can also give it some padding with the "p" class.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>]
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <style>
        #section2img1 {
            width: 100px;
        }

        #section2img2 {
            width: 100px;
        }

        #section2img3 {
            width: 100px;
        }

        #section2img4 {
            width: 100px;
        }

        #section2img5 {
            width: 100px;
        }

        #section2img6 {
            width: 100px;
        }
    </style>
</head>

<body>
    <div id="section2">
        <h3 id="text1section2">Lorem, ipsum.Lorem ipsum dolor sit.</h3>
        <p id="text2section2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum</p>
        <div class="row">
            <div class="col-md-2 p-2">
                <img src="img/SECTION2/WEB_DEVELOPMENT-removebg-preview.png" alt="error" id="section2img1">
            </div>
            <div class="col-md-2 p-2">
                <img src="img/SECTION2/MOBILE_APP_DEVELOPMENT-removebg-preview.png" alt="error" id="section2img2">
            </div>
            <div class="col-md-2 p-2">
                <img src="img/SECTION2/COUSTOMER_PRODUCT_DEVELOPMENT-removebg-preview.png" alt="error" id="section2img3">
            </div>
            <div class="col-md-2 p-2">
                <img src="img/SECTION2/SEO___SMO-removebg-preview.png" alt="error" id="section2img4">
            </div>
            <div class="col-md-2 p-2">
                <img src="img/SECTION2/WEB_DESIGN-removebg-preview.png" alt="error" id="section2img5">
            </div>
            <div class="col-md-2 p-2">
                <img src="img/SECTION2/E-COMMERCE_SOLUTIONS-removebg-preview.png" alt="error" id="section2img6">
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

</html>

Upvotes: 1

Related Questions