• Resolved Pidor

    (@pidor)


    Hi there,

    https://www.mabiblio.be/

    I have a problem with the responsiveness of my website. When it’s displayed on my smartphone or on a computer screen everything works ok. But I recently tried it on an iPad mini and it was a bit of a mess (if you reduce the size of your window on your computer you’ll have the same kind of thing). Is there a way of fixing this?

    Thanks a lot in advance for your answer! ??

Viewing 11 replies - 1 through 11 (of 11 total)
  • 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, https://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!

    dapering

    (@dapering)

    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

    dapering

    (@dapering)

    following

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Responsiveness’ is closed to new replies.