简体   繁体   中英

Logo and Header Containers Not Resizing Properly

I have been working to get my company logo image and the background image to both resize according to the size of the screen they are viewed on. However, when I get the background image to resize properly the logo image will not change size at all. But, when I am able to get them both to resize, the logo image is then far too large and covers the width of the entire screen. Then when I change the width of the logo image to be smaller, then the background image shrinks to less than the width of the screen.

Here is the link to the landing page I am having issues with http://www.dorkdungeontestblog002.blogspot.com/

I would like the header image and logo image to produce the following effect while being responsive to different screen sizes, but as you can see by viewing the site, I am not achieving that result.

Hopeful Header and Logo Appearance

If anyone can assist me with this I would really appreciate it, I've been at it for several hours now and it's just not working. Please let me know if there is any further information I can provide as well.

This is all of the code under the Header note...

/*---------[HEADER]---------*/
#header-holder { width:100%; height:auto; float:left; color:#fff; background-image:url(https://lh3.googleusercontent.com/-dYSRZJJhqiM/VibgbmiBMeI/AAAAAAAADIU/OfLCyLyozy4/s1440-Ic42/DD%252520Landis%252520Large.png);background-repeat:no-repeat;background-size: contain;}
#logo-container img {
width: 100%;
height: auto;
background-size: contain;
}
.Page_title{font-family:'Droid Sans';font-weight:bold;font-size:27px;text-shadow:0px 2px 0px #000;width:800px;text-align:center;padding:10px;margin:17px auto 30px auto;}
.Page_content{font-family:'Droid Sans';font-size:13px;width:560px;text-align:center;margin:0 auto;padding:0 0 56px 0;line-height:22px;color:#ffbda4;text-shadow:0px 1px 0px #000}

Wrote here for the editor.

.container,
#front_page_container {
    width: 100%
}

In this way the countdown remain centered. But in small resolution is too big, and i don't know if this class are used in another place of the site. My advice is to change the layout. The template you are using is not responsive at all, so you have a lot of work to make it responsive.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM