Over on my photography blog, I'm working on adjusting the padding within the blue box, increasing the size of my images, and eliminating hover effects for mobile views. Despite my efforts, the code I've implemented hasn't produced the desired changes. My goal is to enhance the responsiveness of the website for touch-based devices.
@media only screen and (max-width:800px) {
#header, #pageWrapper, #footer {
padding: 30px 20px;
margin-bottom: 0px !important;
}
h1.logo {
text-align: center;
padding-bottom: 10px
}
.slide img {
opacity: 1
}
.sqs-active-slide img {
opacity:1
}
.collection-type-gallery #slideshowWrapper .slide img {
background-color: white !important;
margin: 2px 0;
}
img {
max-width: 200px;
}
.hentry {
background: #F8F9FC;
padding: 10px;
border-style: solid;
border-color: #E2E7F5;
border-width: 2px
}
.collection-51ca14b1e4b014f2c6e0c3e7 .slide img {
opacity:1.0;
}
}