Image Flush With Home Section – Small Screens
URL to the page in question:
http://beepou.com
-
Hi Bill, hope everything going all right!
A couple of weeks ago you provided a clean solution to have an image flush with home section.
I discovered that on small screens (iPhone) there seems to be a gap, which is not present on bigger ones.
Could you provide help on the matter?
Best regards,
Alberto
Hi Alberto,
I took a look and I think that may be the border that’s added to the fourth home section. Here’s the spot in the child theme’s style.css:
#home-four {
border-top: 8px solid #ffffff;
/*border-bottom: 1px solid #7d7cfa;*/
}
You could always wrap that in a media query so that it is only there on larger screen sizes. That could look something like this:
@media only screen and (min-width: 780px) {
#home-four {
border-top: 8px solid #ffffff;
/*border-bottom: 1px solid #7d7cfa;*/
}
}
That way the border is only present on screens 780px (or whatever size you’d like) and larger.
Have a great day,
Bill
This reply has been marked as private.
Looks like it did the trick to me.
This reply has been marked as private.
It makes the black flush against the colored stripes. No gap.
This reply has been marked as private.
To make the phone flush, you may have to move it down like this:
@media only screen and (max-width: 767px) {
#home-three .cbp-so-side-right {
bottom: -20px;
position: relative;
}
}
This reply has been marked as private.
Glad that did the trick Alberto 🙂
- The topic ‘Image Flush With Home Section – Small Screens’ is closed to new replies.