CODEWITHSUNDEEP
htmlcssresponsive-design
Osama Rashad
Osama Rashad

Reputation: 9

images divs are not responsive with smaller screen size

i have a 3 divs containg images in one section. they are aligned in one row on the large screen. but they are not responsive on smaller screens . I need them to be responsive so they are below each others Thanks in advance

<section id="about">
        <h1>undrawa illustration</h1>
        <div class="about-container">
            <div class="image-container">
                <h2>web innovation</h2>
                <img src="img/undraw_feeling_proud_light.svg" alt="" id="image1">
            </div>
            <div class="image-container">
                <h2>web innovation</h2>
                <img src="img/undraw_conceptual_idea_light.svg" alt="" id="image2">
            </div>
            <div class="image-container">
                <h2>web innovation</h2>
                <img src="img/undraw_proud_coder_light.svg" alt="" id="image3">
            </div>
        </div>
</section>

Upvotes: 1

Views: 847

Answers (1)

Professorval
Professorval

Reputation: 323

You didn't include your CSS but I assume you have something like this:

.about-container{
        display: block;
    }
    .image-container{
        display: inline-block;
    }

You need to write separate rules for mobile displays. Try:

<style type="text/css">
/* Mobile CSS */
@media only screen and (max-width: 768px) {
    .about-container{
        display: block;
    }
    .image-container{
        width: 100%;
    }
}

And your HTML:

<div class="about-container">
<div class="image-container">
    1
</div>
<div class="image-container">
    2
</div>
<div class="image-container">
    3
</div>
</div>

Upvotes: 1

Related Questions