Photoshop Question posted in
The official user guide can be found here.

How to Make Image Grid Fit All Screen Resolutions? – Photoshop

I am making a website for colleges and I have a gallery, but I cant get all the images to stay at their respective spots on the page when the window is resized. That’s my main issue: when the window is resized, all the text and images on every page just covers each other and it’s horrible. All my photos are absolute and have percents for left and top. I am modeling my website just like Elon Musk’s the BORING COMPANY website. Is there any way someone could help me draft up some code to make my images on my pages not completely collapse when the window is resized?

The Boring Company Gallery I’m Trying to mimic, Also Try Resizing to see the effect I’d like

Here’s my Portfolio page:

<!DOCTYPE HTML>
<html>

<head>
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="Style.css">
</head>

<body>
<title> Portfolio</title>

<div id="logo">
<img src=Myname.png" width=475px  height=225px>
</div>


<table style="position:absolute;top:25%;z-index: 100;width:50%;left:25%;">
    <tr>
        <td><a href="Home.html"><div id="nav">HOME</div></a></td>
        <td><a href="About Me.html"><div id="nav">ABOUT ME</div></a></td>
        <td><a href="Portfolio.html"><div id="nav">PORTFOLIO</div></a></td>
        <td><a href="Extracurriculars.html"><div id="nav">EXTRACURRICULARS</div></a></td>
        <td><a href="Gallery.html"><div id="nav">GALLERY</div></a></td>
        <td><a href="Contact Me.html"><div id="nav">CONTACT ME</div></a>   </td>
    </tr>
</table>

<div class="portfoliothumbnails" id="thumbnail1"><img src="Medicine.png" width=250px height=250px></div>
<div class="portfoliotitles" id="portfoliotitle1">Lorem Ipsum</div>
<div class="portfoliotext" id="portfoliotext1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare lorem vitae tellus iaculis, id viverra mi pulvinar. Donec sodales commodo mi at commodo. Nullam placerat ut mauris ac maximus. Pellentesque accumsan blandit ante, in pellentesque enim fringilla sed. Nunc magna erat, bibendum et feugiat eu, consequat et leo. Cras commodo fringilla lectus, ut varius ex tempus eget. Duis ultricies, velit et tristique eleifend, velit arcu dignissim elit, sit amet mattis odio dolor ac est. Quisque accumsan convallis accumsan. Suspendisse ornare eros vel velit molestie porta. Fusce vitae euismod ante. Aenean vel justo at odio ornare finibus quis id mi. Integer congue magna non dui blandit, consectetur rhoncus lacus varius. Morbi vel massa orci. Suspendisse gravida lorem id elit mattis tincidunt.</div>
<button class="button" id="button1">Learn More</button>

<div class="portfoliothumbnails" id="thumbnail2"><img src="English.png" width=250px height=250px></div>
<div class="portfoliotitles" id="portfoliotitle2">English Esssays/Documents</div>
<div class="portfoliotext" id="portfoliotext2">A collection of my essays and analysis responses throughout my high school career in Language Arts. </div>
<button class="button" id="button2">Learn More</button>

<div class="portfoliothumbnails" id="thumbnail3"><img src="Trends.png" width=250px height=250px></div>
<div class="portfoliotitles" id="portfoliotitle3">Newspaper Publications</div>
<div class="portfoliotext" id="portfoliotext3">Some of my work in English class was published to the local township newspaper, and was framed by my parents in our living room.</div>
<button class="button" id="button3">Learn More</button>

<div class="portfoliothumbnails" id="thumbnail4"><img src="Art.jpg" width=250px height=250px></div>
<div class="portfoliotitles" id="portfoliotitle4">Creative Work</div>
<div class="portfoliotext" id="portfoliotext4">Work from English and Art such as plays, poems, drawings, photoshop work, and other forms of creative literature. The majority of this section is populated by my work from the creative writing and journalism class, Writing for Publication, I took my freshman year and Digital Arts I from my sophomore year.</div>
<button class="button" id="button4">Learn More</button>

</body>


</html>

Here’s my style:

#logo{position:absolute;
top:2.5%;
left:25%;}

body {
margin-left:25%;
margin-right:25%;
}

#nav{text-decoration:none;
font-size:15px;
font-family:Roboto, sans-serif;
color:black;}

a{text-decoration:none;}

* {box-sizing:border-box}

.slideshow-container {
  max-width: 50%;
  position: absolute;
  margin: auto;
  left:25%;
  top:30%;
}


.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

#headshot{position:absolute;
top:35%;
left:20%;}

#aboutmetitle{position:absolute;
top:45%;
left:25%;
font-family:Roboto, sand-serif;
color:black;
font-weight:bold;
font-size:25px;
margin-left:20%;
margin-right:25%;}

#aboutmetext{position:absolute;
top:50%;
left:25%;
font-family:Roboto, sand-serif;
color:black;
font-size:18px;
margin-left:20%;
margin-right:25%;}

#aboutmelazar{position:absolute;
top:85%;
left:15%;}




.portfoliothumbnails{position:absolute;}

#thumbnail1{left:25%;top:35%;}
#thumbnail2{left:25%;top:65%;}
#thumbnail3{left:25%;top:95%;}
#thumbnail4{left:25%;top:125%;}


.button{  background-color: black; 
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  padding: 10px 24px;
  cursor: pointer;
  font-family:Roboto, sans-serif;
  position:absolute;
  font-weight:bold;}

 .button:hover{opacity:0.7;}

#button1{top:55%;left:55%;}
#button2{top:85%;left:55%;}
#button3{top:115%;left:55%;}
#button4{top:145%;left:55%;}

.portfoliotitles{position:absolute;
color:black;
font-size:16px;
font-weight:bold;
font-family:Roboto, sans-serif;}

#portfoliotitle1{top:35%;left:40%;}
#portfoliotitle2{top:65%;left:40%;}
#portfoliotitle3{top:95%;left:40%;}
#portfoliotitle4{top:125%;left:40%;}

.portfoliotext{position:absolute;
color:black;
font-size:16px;
font-family:Roboto, sans-serif;
margin-right:25%;
}

#portfoliotext1{top:40%;left:40%;}
#portfoliotext2{top:70%;left:40%;}
#portfoliotext3{top:100%;left:40%;}
#portfoliotext4{top:130%;left:40%;}




#image1{position:absolute;top:35%;left:7.5%;}
#image2{position:absolute;top:35%;left:40%;}
#image3{position:absolute;top:35%;left:65%;}
#image4{position:absolute;top:85%;left:12.5%;}

I’m really sorry for typing all this, here’s my gallery if it matters…

<!DOCTYPE HTML>
<html>

<head>
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="Style.css">
</head>

<body>
<title>Gallery</title>

<div id="logo">
<img src="Me.png" width=475px  height=225px>
</div>


<table style="position:absolute;top:25%;z-index: 100;width:50%;left:25%;">
    <tr>
        <td><a href="Home.html"><div id="nav">HOME</div></a></td>
        <td><a href="About Me.html"><div id="nav">ABOUT ME</div></a></td>
        <td><a href="Portfolio.html"><div id="nav">PORTFOLIO</div></a></td>
        <td><a href="Extracurriculars.html"><div id="nav">EXTRACURRICULARS</div></a></td>
        <td><a href="Gallery.html"><div id="nav">GALLERY</div></a></td>
        <td><a href="Contact Me.html"><div id="nav">CONTACT ME</div></a></td>
    </tr>
</table>

<div id="image1"><img src="Personal Website 3.0GalleryA.jpg" height=450px width=600px></div>
<div id="image2"><img src="Personal Website 3.0GalleryB.jpg" height=675px width=450px></div>
<div id="image3"><img src="Personal Website 3.0GalleryC.jpg" height=450px width=600px></div>
<div id="image4"><img src="Personal Website 3.0GalleryD.jpg" height=800px width=450px></div> 
</body>


</html>
Tags:

2

Answers


  1. 0

    Try using Bootstrap, a CSS, HTML and JS library for building responsive websites.
    You can download it and find docs and examples at https://getbootstrap.com

    Basically it divides the view in 12 columns (it’s called Grid system), and screens in 5 categories, xl (extra-large), lg (large), md (medium), sm (small), xs (extra-small); using CSS classes you can decide the number of columns to assing to each element depending on the screen and also column offsets between elements, using classes col-display-n
    where display can be xl, lg, md, sm, xs and n an integer from 1 to 12 and offset-display-n for offsets.

    I think this can be helpful for you. Here Grid system is explained better

    Login or Signup to reply.
  2. 0

    I think this tutorial will help you to achieve what you want:
    https://w3bits.com/css-masonry/
    Generally using position:absolute cannot help you to achieve what you want. The only way to do it is by using position: absolute and to add width in percentages, but it would be an overkill, it would take you a lot of time to achieve it properly on all resolutions and in the end, using something like the link I sent you will get you the proper result faster

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search