Designing a website that caters to both desktop and mobile users has been my recent project. Utilizing media queries for responsiveness has been effective overall. However, there's one specific scenario where I'm facing some challenges.
On desktop view, I have a set of images with text overlay arranged in a particular layout:
https://i.sstatic.net/rsEfX.png
When transitioning to mobile view, I envision displaying these images in two columns, with the last tile spanning across the full width as shown below:
https://i.sstatic.net/D7HCf.png
The issue arises when the image used for the final tile on desktop is square, resulting in it appearing disproportionately large when spread across the full width on mobile devices, like so:
https://i.sstatic.net/lpd2C.png
Here's the current HTML and CSS code snippet I'm working with:
<div>
<div class="hotel_container">
<div class="options">
<div class="option">
<a href="www.example.com" target="_blank"><img class="opt_img" src="images/example.jpg"></a>
<h3 class="centered" id="hotel_info">TEXT</h3>
</div>
</div>
<!-- repeated "options" div 7 more times -->
<div class="options_last">
<div class="option">
<a href="www.example.com" target="_blank"><img class="opt_img" src="images/example2.jpg"></a>
<h3 class="centered" id="hotel_info">TEXT</h3>
</div>
</div>
</div>
</div>
CSS
.options, .options_last{
width: 33%;
overflow: hidden;
display: inline-block;
}
@media only screen and (max-width: 812px) {
.options{
width: 50%;
}
}
@media only screen and (max-width: 812px) {
.options_last{
width: 100%;
}
}
.option{
position: relative;
text-align: center;
padding: 10px;
}
@media only screen and (max-width: 812px) {
.option{
padding: 1px;
}
}
.opt_img{
width: 100%;
opacity: 0.7;
}
.opt_img:hover{
opacity: 0.9;
}
.centered {
position: absolute;
width: 100%;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
#hotel_info{
background-color: rgba(130, 130, 130,0.7);
width: 80%;
font-size: 23px;
padding: 15px;
}
@media only screen and (max-width: 812px) {
#hotel_info{
width: 60%;
font-size: 10px;
padding: 5px;
}
}
I'm hesitant about forcing a specific height for the image to avoid distortion. One solution could be using a rectangular image to switch dynamically on mobile views. However, implementing this based on device type without resorting to traditional media queries seems puzzling to me.
[Edit: Although hiding/showing alternate images with media queries is an option, it can impact page loading times due to all images being preloaded regardless of device type. Seeking advice on a more efficient approach rather than forming habits detrimental to performance]
If someone could guide me or recommend a simplified online resource to assist in tackling this issue, that would be greatly appreciated.
P.S. I'm fairly new to web development, so easy-to-understand answers are preferred. Your patience in clarifying any questions I may have is also valued. Additionally, open to suggestions for improved or streamlined methods based on my foundational learning from Codecademy web development courses.