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.
Related
I have a WordPress plugin installed called Slider and it does not respond to images very well on mobile at all.
I have to enter media queries for the slider to scale down and look mobile responsive, but below a specific size, it starts to cut out the sides of images if they are too big. I've been able to scale the images down for bigger sizes but below 690px it doesn't seem to work without cutting the sides off.
Here is an image of what it looks like on mobile:
If I then increase the width, the images move all the way to the right like below:
So my question is, is there a way to centre the current image?
Here is the only bit of code I think that's holding it in place, but with my width applied:
#wds_container1_0 #wds_container2_0 .wds_slideshow_image_0 {
width: 100%;
height: 100%;
float: none !important;
padding: 0 !important;
margin: 0 !important;
vertical-align: middle;
width: 500px; }
Is there a way to make a website 100% fluid?
As in, fill the background edge-to-edge with an image, no matter the size of the browser window. Also, have it resize larger or smaller as the browser window changes without neccesarily retaining aspect ratio. Images inside divs and font sizes should obviously resize accordingly and maintain the same amount of white space so the page shows exactly the same content in screens from 800x600 to 4K Ultra HD, being the idea to above any kind of vertical scrollbar. Let's forget about mobile and tablets for a moment.
What I have tried for background:
body {
background-image: url(./Si0rPf7.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
Which will fit background as long as the aspect ratio of the image is kept, the moment it changes you will see white spaces on both sides. If cover instead of contain, image will get cropped, which is undesirable if we want to show our whole background to everyone, even if we have to stretch it.
Now, for img src I've had half success with two methods:
.image_1 {width: 100%; height: auto;}
and
<img src="img/image_1.jpg" width="100%"/>
None of them seems able to react to both width and height. Looks like you have to choose between one or other.
For font-size I would just use vw and hope for the best.
You want
background-size:100% 100%;
You should look into the flex model: https://philipwalton.github.io/solved-by-flexbox/demos/grids/
On a site I'm designing I have a header that stretches 100% of the page width and in all browsers it looks perfect but when I check mobile browsers it will only stretch about 80% of the screen while the rest of the content will go full width.
#header-bg{
height: 150px;
background-color: #33363b;
border-top: 11px solid #25272a;
width: 100%;
}
The site is http://hearthable.com and here is a image of it from an iPhone, the same thing happens on android too. You can see in the image below the dark blue background in the header and footer don't go the full width.
It is because you put width:100%; which are relative to the window size. Your site is not responsive designed, but to solve your problem fast
body{
min-width:1180px;}
setting minimum width as others suggested is not the best option, as different devices have different screen widths, and it also changes according to screen rotation.
however, adding display:inline-block; in both header-bg and footer will fix it.
EDIT:
oh yes, and width:100% in both footer and footer-inner
I got a PSD design for my website, and I'm having trouble coding the main banner.
This is the page
The top banner (with the image of the little people) doesn't show properly on some screen resolutions. I sliced the entire banner together with the image and set is as a background image, and the text is live. The problem is, on some screens the image appears on top of the text.
How should I code this? I thought of slicing the image and adding it as a regular image element, but that's difficult because the image has a glow around it which blends into the background.
Is there any easier way to do this?
Thanks!
The reason why it does show up properly in certain screen resolution is because your image dimension is 1550x417, and you using CSS background position property to set it to 1300px 400px. That's not a very responsive way to setting background position, and it bound to vary from screen to screen.
There is an easier way to do this. Since the banner is mostly solid color why not slice only the graphic part of the image, and use background color? You can then position the image to the center of the element.
Slice: http://i.imgur.com/2s35JYs.png
Example:
background: url('../images/banner2.jpg') center center no-repeat #ECE8DF;
you should add "center 0" to background style.
#banner {
background: url("../images/banner2.jpg") no-repeat center 0;
background-color: #e8e4da;
height: 400px;
padding: 0;
background-size: 1300px 400px;
border-bottom: 2px solid #fff;
}
I have this part of HTML file
<div id="header">
...
</div>
and this part of CSS file
#header {
background: url("img.png");
background-repeat: no-repeat;
background-position: left top;
height: 140px;
margin: 0px auto;
}
The size of img.png is 1290 x 150 pixels. Everything was OK, but after I opened the web in sister's laptop the image is not stretched over all monitor (horizontally). There is about 50 pixels gap from the right.Is there some general solution, so that the web will display same on all monitors?
thank you
It all depends on different screen resolutions useed by different monitors/devices.
You could let the image stretch to the size of the monitor if you use an image tag to display the image, and specify its width and height properties to be 100%, but that will result in a stretched image depending of the device used...
I suggest you to look for some tutorials about centering images while occupying all the avaiable space without blank space, and retaining image proportions at the same time.
your css code will not strech your background immage, it will only not repeat. as far as I know CSS wont even do that (streching an is possibe )