when i resize the screen the info on the first image is hidden how do i fix

Question

J._1 0 Newbie Poster

11 Years Ago

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./dist/style.css">
</head>

<body>
    <header class="toolbar">
        <div class="icons">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 64 64">
                <path d="M32 4c-8.837 0-16.836 3.582-22.627 9.374l-9.373-9.374v24h24l-8.971-8.97c4.344-4.343 10.343-7.030 16.971-7.030 13.254 0 24 10.745 24 24 0 7.169-3.143 13.602-8.126 18l5.292 6c6.644-5.864 10.834-14.442 10.834-24 0-17.673-14.327-32-32-32z" fill="#000000"></path>
            </svg>|
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 64 64">
                <path d="M47.199 4c-6.727 0-12.516 5.472-15.198 11.188-2.684-5.715-8.474-11.188-15.201-11.188-9.274 0-16.8 7.527-16.8 16.802 0 18.865 19.031 23.812 32.001 42.464 12.26-18.536 31.999-24.2 31.999-42.464 0-9.274-7.527-16.802-16.801-16.802z" fill="#000000"></path>
            </svg>
         </div>   

        <div>
            <h6>Juan Estrada<span>Photography</span></h6>

            <nav class="menu">
                <a href="#">About</a>
                <a href="#">Work</a>
                <a href="#">Contact</a>
            </nav>
            <h1>LandScape</h1>
        </div>
    </header>
    <div class="holder">
        <div class="container">

            <div class="title">


            </div>
        <div class="content">

            <div id="item">
                <img src="">
                <h3>Ferrari Laferrari</h3>
            </div>
        </div>

        <div class="aside">
            <ul class="info">
                <li><h4><i class="icon icon camera">Canon Powershot S95</h4></li>
                <li>22.5 MM</li>
                <li>f/5.6</li>
                <li>1/1000</li>
                <li>80</li>
            </ul>             
        </div>

    </div>


<div class="container2">

            <div class="title">


            </div>
        <div class="content2">

            <div id="item2">
                <img src="">
                <h3>Ferrari Laferrari</h3>
            </div>
        </div>

        <div class="aside2">
            <ul class="info2">
                <li><h4>Canon Powershot S95</h4></li>
                <li>22.5 MM</li>
                <li>f/5.6</li>
                <li>1/1000</li>
                <li>80</li>
            </ul>             
        </div>

    </div>


</div>
</body>

</html>

css

*{
    box-sizing:border-box;
}

body{
    background-color: rgb(36, 36, 25);
}

header{
    width: 80%;
    margin: auto;
}
h1{
    background-color: orange; 
    text-align: center;
    display: block;
}
h6{
    display: block;
    background-color: red;
}
.toolbar{
    background-color: white;
    display: inline-block;

}

.icons{
    background-color: blue;
    display: inline-block;
}

.menu{
    display: inline-block;
}
a{

    background-color: orange;
    display: inline-block;
}
img{
    display: inline-block;
    width: 100%; 
    -webkit-filter:grayscale(100%);
    filter: grayscale(100%);    
}
img:hover{
    transition:.5s;
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

}
nav{
    display: inline-block;

}

/*.title{
    background-color: yellow;
    background-image: url(https://webdevbuddy.files.wordpress.com/2012/06/boy-cartoon.png);
    margin: auto;
    border-radius: 50%;

}*/

.holder{
    height: 100%;
    width: 100%;
}
.container{
    display: inline-block;
    background-color: blue ;
    max-width:80%;
    height: 100%;
    margin: auto;



}
.content{
    display:inline-block;
    width: 40%;
    min-width: 600px;
    background-color: yellow;

}

.aside{
    display: inline-block;
    background-color: green;
    min-width: 200px;
    position: absolute;
    position-top: 0;


}   
.info{
    background-color: grey;

}

.container2{

    background-color: red ;
    max-width:80%;
    height: 100%;
    margin: auto;



}
.content2{
    display:inline-block;
    width: 40%;
    min-width: 600px;
    height:50%;
    background-color: yellow;

}

.aside2{
    display: inline-block;
    background-color: green;
    min-width: 200px;
    height:50%;
    position: absolute;
    position-top: 0;

}   
.info2{
    background-color: grey;

}

html-css user-interface web-design

4 Contributors
4 Replies
183 Views
1 Week Discussion Span
Latest Post 11 Years Ago Latest Post by advent_geek

Dani AI

Generated 6 Months Ago

Quick diagnosis: the info block is being taken out of the normal layout (so it visually overlaps or disappears) and the image column is forced wider than the viewport. In the posted CSS the right-hand panel is effectively removed from flow by using absolute positioning (and a non‑existent property position-top), while .content has a large min-width that prevents it from shrinking. There’s also a stray } in the stylesheet that can break later rules. Those three issues together explain why the info doesn’t drop below or push other blocks down.

A practical, modern fix is to stop using absolute positioning for the aside and use a flexible two‑column layout that switches to a single column with a media query. Example (replace the old .container/.content/.aside rules with something like):

.container {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  max-width: 80%;
  margin: 0 auto;
}
.content {
  flex: 1 1 auto;
  min-width: 0; /* allows the image column to shrink inside flex */
}
.aside {
  flex: 0 0 220px; /* fixed sidebar width on wide screens */
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}

@media (max-width: 700px) {
  .container { flex-direction: column; }
  .aside { order: 2; width: auto; } /* moves info below image and pushes following content down */
}

Troubleshooting tips: remove position:absolute and the invalid position-top from the aside, delete the min-width: 600px on the content, and fix the stray }. Use the browser DevTools Layout/Computed panels and the device toolbar to watch how boxes shrink and where overflow appears. Prefer max-width:100% + height:auto for responsive images rather than inline !important styles.

This expands on ’s media‑queries suggestion and is a cleaner alternative to ’s inline width:100% !important. If can provide a live URL as suggested, a follow‑up can show targeted adjustments for that page.

All 4 Replies

gentlemedia 803 Master Poster

11 Years Ago

Looki into CSS media queries.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

J._1 0 Newbie Poster · Answer 1 · 2015-05-13T18:06:16+00:00

i would like the info on the right of the image to drop below it when the screen is resized. also for it to push the next div down

drjohn 56 Posting Pro in Training · Answer 2 · 2015-05-15T16:42:21+00:00

It would be a lot easier if you gave us a url so we can see what is happening and play with it there, without having to create our own copy of your page.

advent_geek 0 Posting Whiz · Answer 3 · 2015-05-21T09:47:12+00:00

try to use style="width:100% !important" on inside the imag tag.

it will resize the width of the image according to the media port

Kind Regards

when i resize the screen the info on the first image is hidden how do i fix

Dani AI

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers