Photos not responsive on inside pages
-
AuthorPosts
-
bnjewell
MemberHi,
I’m trying to change some of my interior pages so that the header image is much smaller (400px tall at most), but still full-width. I’ve hacked around in the CSS enough that it works (sort of), but the responsiveness of the header photo doesn’t seem right. It jerks back and forth a lot as you resize the browser window, and the header doesn’t show up at all on some phones. Here’s the page in question:
Any ideas?
Thanks,
BrianThe blog I need help with is: (visible only to logged in users)
bandicootmarketing
Theme AuthorHi Brian – thanks for reaching out.
1. The “jerking back and forth” that you mentioned is usually caused by the fact that when you re-size a browser window, at times your browser window is in-between what we call “break points.” The break points are usually destop, tablet, mobile. It’s basically 3 different sizes that things get resized to when the media query is called on load on a device. Shrinking a browser window is not behavior that a normal person would engage in, so as long as the image displays correctly at each break point (so on a tablet, and then on a mobile phone), that’s all we can guarantee for the most part.
2. Can you please let us know which specific mobile phones you are having problems displaying your image on? Also, can you please include a copy of all of the custom CSS you have written to make changes yourself?
Cheers,
It doesn’t look right in Safari on my iPhone 5s (yeah, I know that’s old and small). Also, it doesn’t look right on WordPress’ preview tool when that is in mobile mode.
Here’s the CSS:
article {border-bottom: none;}
#site-logo {
margin-right: 50%;
margin-top: 10%;
}.only-on-home.no-fittext #site-description{
visibility:hidden
}.page-id-1825 #site-description{
visibility:hidden
}#site-description{
font-family: Oswald;
color: #FFF;
font-size: 25px;
align-content: space-around;
margin-left: 70%;
margin-right: 5%;
margin-bottom: 5%;
text-shadow: 0 0 40px #000;
}
@media screen and (min-width: 960px) {
#site-description {
font-size: 40px;
line-height: 120%;
font-family: Oswald;
color: #FFF;
align-content: space-around;
margin-left: 70%;
margin-right: 5%;
margin-bottom: 5%;
text-shadow: 0 0 40px #000;
}}
.entry-title {
display: none;
}.only-on-home #more-site {
visibility: hidden;
}.page-id-1825 #header{
max-width: 100%;
height: auto;
}.page-id-1825 div.title-card-wrapper{
max-width: 100%;
max-height: 400;
}.page-id-1825 div.title-card{
max-width: 100%;
max-height: 400;
}.page-id-1825 img.header-img{
max-width: 100%;
height: auto;
}
@media screen and (max-width: 960px) {
.page-id-1825 img.header-img {
margin-top: 65px;
}
}.page-id-1825 #site-logo {
display: none;
}Just following up on this — any ideas?
- The topic ‘Photos not responsive on inside pages’ is closed to new replies.