Support » Theme: EasyBlog » Header Image not responsive

  • Hello,

    After 3 days of researching the problem, I still can’t fix it.
    Could someone please help me how to fix the Image header from disappearing when I make the screen smaller? I don’t mind to make the menu (navbar) location also responsive, in way that it will go up or down. I understand the image size is not standard, but I try to work with it.

    Many thanks
    Mike

    http://www.silatehilim.com

Viewing 6 replies - 1 through 6 (of 6 total)
  • Hello Michael,

    are you familiar with CSS?
    There is a rule which overrides your background image in theme “easyblog” file “style.css” on line 1312.

    
    @media all and (max-width: 1200px) {
    	.dt-header {
    		background-image: none !important;
    	}
    }
    

    Maybe you can create a child theme, copy the Styles and remove this media query?
    Hope that helps.

    Thanks a lot!!

    that solved the disappearing problem!

    How can I address now the white background under it when the screen is small. In other words how can I make the navbar to move up when the screen is smaller

    Hello.
    You can reduce the height of your header or make the background image bigger with “background-size” and align it with “background-position” within a media query, for example:

    
    @media all and (max-width: 900px) {
        /** Your code ... */
    }
    
    • This reply was modified 2 years, 8 months ago by  Bernhard.

    doesn’t work 🙁

    @media all and (max-width: 900px) {
    	.dt-header {
    		background-size: auto 100% !important;
    		background-position: relative !important;
    	}
    	.dt-menu-wrap li ul {
    		position: relative;
    		z-index: 99999;
    		top: 0;
    		visibility: visible;
    		width: 100%;
    		max-width: 100%;
    
    		opacity: 1;
    		border: 0;
    		padding-left: 24px;
    	}
    }

    It doesn’t work either.
    What can I do

    I’m having the same problem. The header background image does not show in the smaller responsive layouts (tablet & phone). I tried removing the media query mentioned above, but there’s still nothing but a white block at the top.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Header Image not responsive’ is closed to new replies.