CODEWITHSUNDEEP
htmlcssresponsive-designflexbox
Mark
Mark

Reputation: 25

HTML CSS Responsive Changing Position on size of browser

I want to place the text on the bottom of the image. When I make the browser smaller, then I want the text to always stay in the same spot.

Currently, the image is changing size and position like it is supposed to, but the text isn't changing and staying in the right position.

How can I have it so the text will be responsive, and stay in the same spot? So how can I get my site to like the image below no matter the size of the browser? I tried below with article h3, but it isn't working.

IMG:

enter image description here 

/*flexbox*/

div {
    width: 80%;
    margin: 1em auto;
    padding: 1em;
    box-sizing: border-box;

    display: flex;
    flex-flow: wrap;
}

div > * {
    flex: 1 1 30%;
    justify-content: flex-end;
    padding: 1em;
    border: solid .125em #00aaff;
}

div h1 {
    flex: 1 1 68%;
    font-size: 2.05em;
    text-align: center;
    padding: .5em;
    padding-bottom: .5em;
}

/*IMAGES*/
img{
    width: 100%;
    height: auto;
}

/*PAINTING SUMMARY*/
p{
    padding:2em;
}

/*SUN NAME OVER IMAGE*/
article h3{
    position: absolute;
    left: 20%;
    top:72%;
    width: 20%;
    height: auto;
    font-size: .75em;
    font-family: Arial, Helvetica, sans-serif;
    border: solid 1px darkgray;
    line-height: 1.2;
    text-align: center;
    z-index: 2;
    background: white;
    color: black;
    opacity: 0.8;
}

/*TABLET*/
@media screen and (max-width: 870px)
{
    .div {
        width: 80%;
        background: red;
        flex-flow: column wrap;
        justify-items: center;
        align-items: center;
    }
    
    article h3{
        position: absolute;
        left: 20%;
        top:72%;
        width: 20%;
        height: auto;
        font-size: .75em;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        z-index: 2;
    }
}

@media screen and (max-width: 602px)
{  
    div {
        width: 80%;
        background: teal;
        color: white;
        flex-flow: column nowrap;
        justify-items: center;
        align-items: center;
    }
    
    article h3{
        position: absolute;
        left: 20%;
        top:72%;
        width: 20%;
        height: auto;
        font-size: .75em;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        z-index: 2;
    }
    
    div h1 {
        width:90%;
    }

    }
    
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Practice</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <link rel="stylesheet" href="practice/lab6.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
    
<body>
    
    <div>
        <h1>Museum of the Arts</h1>
        <section>
            <img src="images/sunday.jpg"/>
        </section>
         
        <section>
            <p><span>Sunday Afternoon on the Island of La Grande Jatte</span>, painted in 1884, is one of Georges Seurat's most famous works. It is a leading example of pointillist technique, executed on a large canvas. Seurat's composition includes a number of Parisians at a park on the banks of the River Seine.
         </section>
        
        <article>
            <h3><cite>Sunday Afternoon on the Island of La Grande Jatte</cite></h3>
        </article>
        
        <main>
            <h3><cite>Nighthawks</cite></h3>
        </main>
        
         <section>
             <p><span>Nighthawks</span> is a 1942 oil on canvas painting by Edward Hopper that portrays people in a downtown diner late at night. It has been described as Hopper's best known work and one of the most recognizable paintings in American art Within months of its completion, it was sold to the Art Institute of Chicago on May 13, 1942 for $3,000.</p>
         </section>
         
        <section>
            <img src="images/nighthawk.jpg"/>
        </section>
        
        
    </div>
    
</body>
</html>

Upvotes: 1

Views: 455

Answers (1)

Sarbraj Dulai
Sarbraj Dulai

Reputation: 180

You can achieve that by using 2 CSS properties:

  1. Setting the image as a background of the DIV, example below: https://www.w3schools.com/cssref/pr_background-image.asp
  2. Defining the text position property to be relative to the div, example below: https://www.w3schools.com/cssref/pr_class_position.asp

Hope this help!

Upvotes: 1

Related Questions