so I have kind of a unique website, where I have a gallery where users can click on the image and then see more photos of what they clicked on, specifications, and a little info blurb. However, I am coding it on my 11inch laptop, but when I checked it out on my 1440p screen it looked terrible, so I fixed that with media queries, but I am not sure if that is the best way to get it to look right on all screen sizes. I have used media queries before to get websites to look good on mobile, and it is time consuming but that is not the issue, I am more then happy to do it but figured I would check to make sure its the best way.
So my website is http://darthvixcustomsabers.com/ and some other pages are not very "responsive" on different screens, but the main ones I am concerned about is http://darthvixcustomsabers.com/gallery.php and then like when you click on the first one it takes you to http://darthvixcustomsabers.com/corran.php which does not look great on different screens. Luckily I will only need to modify one .css file since all the photodetail pages of each object use the same script, bit just different photos/info.
Here is my html and css is below, I think the main issue is the photos being responsive and getting the info blurb to adjust as the screen size does.
Thanks guys
<?php include 'header.php';?>
<p id="service">Corran Horn </p>
<div class="mainphoto"> <img src="images/corran/corran.jpg">
<p class="saberinfo"> This is a saber from Rob at Genesis Custom Sabers that I bought off of a member at FX-Saber Forum. When It came it had a PC 1.5, however I too the entire saber apart; re-did the switches, changed the led to a 10W RGGB, installed a Color Extender to allow infinite blade colors, upgraded the PC1.5 to a CF7, installed a RGB accent so the crystal would match the main blade color, and installed a rice port adapter. These hilts are very rare, very few ever go on sale, so I was overjoyed to be the first person to upgrade one of Rob's Corran Horns with so many of Plecter Labs new features. </p>
</div>
<div class="services">
Specifications
</div>
<ul class="servicelist">
<li>Crystal Focus 7 +CEX</li>
<li>10W RGGB</li>
<li>1.5W Premium Speaker</li>
<li>RGB Crystal Chamber (mimic main blade)</li>
<li>3Segment Bargraph</li>
<li>7.4V Battery</li>
<li>1 Inch Blader Holder</li>
<li>2.1mm Recharge Port</li>
</ul>
<section class="column2">
<div class="image-container2">
<img src="images/corran/corran1.jpg">
</div>
<div class="image-container2">
<img src="images/corran/corran2.jpg">
</div>
<div class="image-container2">
<img src="images/corran/corran3.jpg">
</div>
</section>
<?php include 'footer.php';?>
</body>
</html>
and CSS
.column2{
width:90%;
min-height:200px;
margin:3%;
margin-left:9%;
padding-bottom:2%;
margin-bottom:4%;
}
.image-container2{
width: 32%;
height: 230px;
float: left;
text-align:center;
}
.image-container2 img{
max-height: 220px;
width: 80%;
border: 3px solid white;
text-align:center;
}
div.mainphoto img {
border: 3px solid white;
}
p.saberinfo {
float:right;
margin-right:2%;
font-size:120%;
width:35%;
line-height: 120%;
}
@media screen and (device-aspect-ratio: 1280/720) {
p.saberinfo {
margin-right:4%;
font-size:125%;
text-align:justify;
}
div.mainphoto img {
margin-left:4%;
}
ul.servicelist {
font-size:135%;
}
.image-container2 img{
max-height: 250px;
width: 80%;
border: 3px solid white;
text-align:center;
}
div.footer {
margin-top:4%;
}
div.services {
font-size:150%;
}
}
@media screen and (device-aspect-ratio: 2560/1440) {
p.saberinfo {
margin-right:8%;
font-size:175%;
text-align:justify;
}
div.mainphoto img {
margin-left:8%;
}
ul.servicelist {
font-size:200%;
}
.image-container2 img{
max-height: 320px;
width: 80%;
border: 3px solid white;
text-align:center;
}
div.footer {
margin-top:8%;
}
div.services {
font-size:220%;
}
}
I also know you can use min and max height and widths but think I need something more, or a mix? I do not have enough screens to test it properly on but ill keep messing with it and use emulators online.
I am not sure if what actually is your problem here but what I understand to be your concern was to test your website with different screen sizes in the same computer is it?
Now there are websites offer that capability if you search on google like
this and this just enter your website url and your good to go.
But I am highly recommending you to use the developer tools if you are using chrome just press f12 and press the show drawer icon beside settings at the upper right hand of the developer tools that popups then choose into the dropdown box the screen size you want to test.
Also there is a chrome extension and it was amazing in testing website responsiveness but I forgot the name. You can search in google that extension and install it.
Hope it helps.