Somehow my image carousel don't show anything. It's supposed to show a full sized image. If I don't set DOCTYPE to html5, it works just fine. Any ideas from looking at the source?
http://putten.evisio.no/
Remove the height: 100%; rule in your child theme's CSS # line 164.
And add
.carousel-inner{
width: 100%;
height: 100%;
}
#myCarousel {
min-height: 100vh;
}
to it.
Related
The footer of this WP site has 3 logo images:
The image's original dimensions are very different, so I want to restrict its max-width and max-height, which I put in the wp-image-490 class:
But when I do this, after reducing the window size, the image is being cropped:
How to fix this?
Try update your css with below code
CSS
.wp-image-490 {
width: 100%; /* Newly added */
max-height: 200px;
max-width: 350px;
}
See if you can add a different class (or id) for your first logo, that your second and third logo don't have.
Then for this class (or id), add the rule
<your class/id> {
width: 100%;
}
(As Par Thea suggested above)
Solved the problem mentioned inserting the following elements on the class:
.wp-image-490 {
object-fit: contain; /* fix the image distortion caused by "width: 100%" */
width: 100%; /* fix the image cropping caused by "max-width" */
max-height: 200px;
max-width: 350px;
}
When I load my page, images are displaying correctly, and when I scroll and come back to the images, they appear like this only on mobile :
enter image description here
Use this CSS in which you want media query.
.your_class or img {
width: 100%;
max-width: 100%;
height: auto;
}
I'm pretty new to coding so it may be that I do not understand what I'm doing. I've tried every bit of code advice given on this website that seems to pertain to my situation and I cannot get results!
My carousel sliders are outside my images and I need them in/on my images. I want them the size they currently are so viewers do not have to scroll up and down to view my entire picture. You can view my predicament at http://mirandarodgers.com/lenoxhouse.html
Like I said, I've tried everything under the sun. Currently my code just says:
.carousel .item{
min-height: 525px; /* Prevent carousel from being distorted if for some
reason image doesn't load */
}
.carousel .item img{
margin: 0 auto; /* Align slide image horizontally center */
position: absolute;
min-width: 100%;
height: 525px;
max-width: none;
}
I'm ashamed of how much of a hack this is, but it might help you out:
.right {
right: calc(100vw / 2 - 374px);
}
.left {
left: calc(100vw / 2 - 374px);
}
So to solve this I gave both the images and the .carousel a fixed max-height (I used 400px).
.carousel .item img,
.carousel {
max-height: 400px;
}
You vertical images will scale to a height of this value.
You can play around with different max-height values and even have the height depend upon the screen size using CSS Media Queries.
Whats happening is that the slider images are aligned to the sides of the actual carousel itself, if you want to restrict the size of the carousel set a max-width on it. This is because the size of your images cannot fit the width/height of the carousel and there isn't any code for resizing the img or the carousel. If you work on the resizing of your elements it should solve the problems you are having and try to find better images that are roughly the same dimensions or the carousel will expand/shrink unexpectedly if it isn't handled correctly.
I added the following to .carousel and it looked much better on the site.
.carousel {
max-width: 70%;
position: relative;
margin: auto;
}
Also i would add an img tag with
img {
max-width:100%
}
And this
.carousel .item {
max-height: 525px;
}
Say that i want to have a couple of divs on my page with images in the background (like this: http://www.ubudhanginggardens.com/). I know how to set the size of my divs, but the problem is that the background image stays the same if I make the web browser smaller... I want the background image to scale up/down with the web browser.
CSS
body, html {
height: 100%;
width: 100%;
margin: 0px;
}
#container1 {
float: left;
height: 100%;
width: 50%;
background-image: url(../img/1.png);
}
#container2 {
float: left;
height: 100%;
width: 50%;
background-image: url(../img/2.png);
}
This can be done with pure CSS and does not even require media queries.
To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9 for IE8.
Source
CSS:
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
And if you want to enforce a fixed max width of the image, just place it inside a container, for example:
<div style="max-width:500px;">
<img src="..." />
</div>
jsFiddle example here. No javascript required. Works in latest versions of Chrome, Firefox and IE (which is all I've tested).
If you would like to have your image scale with your browser, set the width to a percent instead of defining it as a number of pixels.
So if you wanted the image to always cover half of a div:
<div class="my_div">
<img src="http://example.com"></img>
</div>
<style>
.my_div .image {
width:50%;
}
</style>
As you change your browser window size, the size of the image will change. You might want to take a look at Responsive CSS Frameworks, such as Twitter's Bootstrap, which can help you achieve exactly this behavior.
My website is at http://filmblurb.org. As you can see, I did a CSS trick with the min-height tag to make the page-container infinitely scroll vertically when the window is zoomed out. The problem is that the gray from the background (from the body tag) overlaps the white background in the page-container when you first load the site. Anybody know why's it doing that and how I can go about trying to fix it so that the gray always stays in the background? I tried everything to fix this, but I can't figure out the problem.
Thank you for your help in advance. I appreciate it.
I'm not seeing your problem, but I would think this would work:
html {
height: 100%;
width: 100%;
min-height: 100%;
background-color: gray;
background-attachment: fixed; /* may be overkill */
}
On line 59 in your style.css,
change
html, body {
min-height: 100%;
}
to
html, body {
height: 100%;
}