Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a carousel slider which works perfectly in large screens. But when the same is viewed in small devices, a extra space of gray background is added. The same can be viewed in (ctrl+shift+m) in firefox of this SITE LINK . When viewed in firebug, I have noticed that it might due to
element.style {
height:345.6px
}
If I remove the height, it works perfectly. How to fix this ?
UPDATE: If no slider appears, please select change city to Guwahati
I would need more information to help you. Are you using some kind of template? Do you have access to the the raw HTML or CSS? Please be more clear about how we can help.
Edit:
True this should be a comment. Sorry about that. Give the element a specific class and override the template CSS. Something like this:
HTML:
<section id="home" class="customHeightStyle home-section home-parallax home-fade bg-dark-30" data-background="" style="height: 480.24px; top: 0px; background-position: 82px 38px, 44px 31px, 22px 15px;">
CSS:
.customHeightStyle {
height: auto !important;
}
In html, add the same image as background for the parent .item. And use background-size:cover;
For small screen sizes, hide the image using opacity or visibility.
Increase the height of .carousel, .carousel-inner and .item to 100%.
Because you have set height of the container element and then styled the image to be 100% in width.
The upper image is trying to preserve best aspect ratio. You need to set the height of containers properly and then try adding images as cover photos to individual sliders with background-image and background-size property.
Remove youe section style height: 5371.2px;
<section id="home" class="home-section home-parallax home-fade bg-dark-30" data-background="" style="background-position: 20px 8px, 11px 6px, 5px 3px;">
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I am not able to find images that would take up the full width of the page and just 25% per cent of the page height. As soon as I change the css of the image, it looks weird since its width is too big compared to the height. Does anybody have an idea about where I could find images that work with this? or how I should deal with this?
Thank you in advance,
You have many ways to fix this. An easy one is to use background-image property instead of <img> tags.
eg:
div.image {
background-image: url('your/img/path.jpg');
background-repeat: no-repeat;
background-size: cover (will cover all the div surface) || contain (will fully contains your image);
}
Fiddle :
div.image {
display: block;
width: 100%;
height: 50vh;
background-image: url('http://musiccitiessummit.com/wp-content/uploads/chicago-1.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
<div class="image"></div>
EDIT
If you have to work with <img> tags, take a look at this object-fit property : https://css-tricks.com/almanac/properties/o/object-fit/
There is no one image to fit all scenarios since there are many screens with different aspect ratio and different resolutions.
You must clarify you Art Direction and your responsiveness on how your page will look according to the view port size.
You must use #media and also have a look at the picture element, the source element and the srcset attribute since your page must be mobile friendly first
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Okay, so this is a first - my CSS is working in all tested browsers...except Chrome.
I am attempting to render a simple circle in a div.
Example is: http://redappledev2.wpengine.com/ The login icon in the upper right hand corner of the header (circle with the user image).
In Firefox, IE, Safari the circle renders as a typical circle.
The current css is: border-radius: 25px; but the expected result also occurs when the css is border-radius: 50%;
From what I can peg down - it looks like in Chrome the problem is that the parent container - an A tag - the height is to short which is based on it's font size - currently 20px. The font size cannot be increased, but in testing when I increase the size - the a tag's height increases and the circle border is rendered as a true circle and not an eclipse.
Am I missing something? Is there a better way of rendering the circle border around the user icon?
Thank you!
It looks like if you change div.icon-circle from display:inline to display:inline-block things start to appear as you intend in Chrome.
I just used the DOM inspector to tweak some of your styles and got to a circle with the following style rule:
.icon-circle{
border:1px solid #627F9A;
border-radius: 25px;
display: inline-block;
padding: 0px 5px 2px 4px;
position: relative;
top: 2px;
}
Good luck with your site
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
My background image, which covers the entire web page, overflows past the HTML and body elements, even though they're both set to 100%.
It's a simple page, as seen here.
I've tried several different techniques to place the background image (including setting it to cover, but I still encounter this overflow issue)
(I feel like I'm going a little crazy, but I'm probably missing something that's very apparent).
Try overflow:hidden
.translucent {
width: 100%;
height: 100%;
background-color: rgba(0, 92, 60, 0.95);
overflow: hidden;
}
I wonder why you set this in the body tag.
It's much easier to give the body tag a background-image.
So i changed your body css style to this:
body {
width: 100%;
height: 100%;
background: url('cover-plaza-707-fifth-construction.jpg') no-repeat center center fixed;
background-size: cover;
position: fixed;
}
And you now can delete <img src="cover-plaza-707-fifth-construction.jpg" id="bg">
I hope this solves the problem, i haven't tested the scrolling yet.
[After reverting it back to a cover background image rather than the standalone image I placed with reduced z-index as a bug fix]
Setting .translucent's min-height to 100% (rather than just height: 100%;) fixed the issue.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I tried to solve my problem searching through the various questions already posted, but I have not found one that is made for my
I'm creating my new website using the "responsive" technique and now I'm missing just one little thing:
I enter inside a DIV a background image
The DIV should have a width of 100% to fill the entire page, and I have to make sure that the height of the DIV that contains the image will auto resize when resizing the page.
If you want the image to retain the width and height of the containing div, use:
background-size: 100% 100%;
The image will distort, but you may not mind.
If you want the background to be whatever portion of the image is sufficient to cover the
entire div as the viewport changes, use:
background-size: cover;
If you want to ensure that the entire image is in the background with the proper aspect ratio, use:
background-size: contain;
In this case, the image may be tiled to cover the div.
HTML
<div id="thediv"></div>
CSS
html, body {
height: 100%;
}
#thediv {
height: 100%;
background-image: url(http://i.imgur.com/MabCTXH.jpg);
background-size: 100% 100%;
}
Is this what you are looking for? I just added the padding: 5px; and background-color: red; so op can see that the div is 100% wide and is responsive as well as the image
http://jsfiddle.net/hyKCa/1/
I am designing a web page which only contain a image (Images are going to change with time). Dimensions of the images are not fixed. So I planned to show images in both vertically and horizontally center. For horizontal center I use margin:0 auto; and for vertical center i use line-height and vertical-align as explained in may SO answers. To constrain images which have bigger dimensions then the windows i used max-height, max-width property with the image tag.
To see: fiddle {to see what happening replace the image with any image of greater dimension the browser window. for small images everything works just fine.}
I am also sharing snapshots:
With small image:
With big image:(I hope you can see the little scroll bar in the right)
I am using Google Chrome (20.0.1132.17)
I think you need:
html, #container /* whatever your container is*/ {
overflow: none;
}
EDIT:
You'll have to post a live page with the content you mean. JSFiddle is not enough for this question.
You can set max-height: 100%, but then you also have to set
html, body {
height: 100%;
margin: 0;
padding: 0;
}