Hello, you are referring to header image? Not covering header area?
iPad mini should be 768px in width (portrait). At smaller screen sizes theme is set to display image max-width:100%.
Your image original size is 600px so try using larger image, ideally you should use 1920px width images.
Thread Starter
Pidor
(@pidor)
I am referring to the whole welcome area plus the menu area (and actually also the background picture of the main page which becomes cut when the size of the screen is smaller than the size of a computer screen).
If you play with the size of the screen, you’ll see it happen. A piece of the background goes where the menu is normally, as well as on the right of the welcome area picture. Are you sure it’s because of the size of the picture? I’m asking because the picture works well on computer screen. Isn’t it weird?
Thanks a lot in advance for you answer 🙂
You are using Responsive Menu plugin? Theme have its own responsive menu. It is not piece of background it’s image that is 600px in width, never mind :). Yes i played a little, apply custom CSS codes below, and you dont have to change your image.
Header image fix:
img.header-image {
min-width: 100%;
}
Setting click menu little up:
div#click-menu {
top: 50px;
}
Resize Intro heading (smaller):
@media only screen and (max-width: 992px){
.welcome-title.wow.bounceInDown.animated {
font-size: 65px;
}
}
Let me know is it better?
Thread Starter
Pidor
(@pidor)
Hey, thanks a lot for your quick response!
Yes, it’s much better. I still have a “gap” between the welcome area and the first section though. And I also have a new problem : the title, http://www.mabiblio.be, is not responsive anymore…
Yes, I am using Responsive Menu 🙂
“gap” is place where default menu should be displayed 🙂
@media only screen and (max-width: 992px){
div#undefined-sticky-wrapper {
display: none;
}
}
Please, can you explain:
is not responsive anymore
?
Thread Starter
Pidor
(@pidor)
Everything seems to work perfectly now I changed this piece of code 🙂 Thanks a lot, you’re rather efficient 😀 Impressive! If I still have a problem I didn’t see I’ll tell you 🙂 Thanks again!
Thread Starter
Pidor
(@pidor)
Sorry, me again, I spoke to quickly 🙁
When I say that the title is not quite responsive I mean that before getting smaller it gets eaten by a right side of the screen (if you try reducing your screen from right to left I guess you’ll see it happen). Is there a way of fixing this completely?
The other problem is the background. When the screen is a certain size (more or less the size of an ipad in landscape view), the background divides itself in several layers and stop being fixed. I hope you understand what I mean.
Thanks a lot in advance for your help 🙂
Hi again, I tried resizing screen and also tried several standard resolutions. Text was eaten in Firefox web browser, try lowering font size:
@media only screen and (max-width: 992px){
.welcome-title {
font-size: 45px;
}
}
It should work now.
Regarding background, I can’t reproduce that on PC, background is normal. It is very probable that you are experiencing this problem.
Sorry, I can’t help you with that. Cross browser compatibility is deep field 🙁 , try using some other browser on Ipad??
Thread Starter
Pidor
(@pidor)
You help me a lot. I think I figured out how it works so I should be able to solve this problem on my own if I encounter it again 🙂 Thanks a lot!
Hello Pidor/ Pierre
I see you managed to get the Welcome Title responsive. How did you do it? I have not managed to yet on diegoperelman.com
Thanks in advance
Diego
