I have a slider in my bootstrap website, a link to the website is here
The slider image is working fine in desktop devices, but in mobile it's not fitting into screen, I did the following css:
#media only screen and (max-width: 600px)
.n2-ss-slider [data-mode=fill] .n2-ss-slide-background-image {
background-size: 400px !important;
}
This css was working fine yesterday, now it's not working, can anyone please tell me how to make the slider image fit into screen in mobile view, thanks in advance
Best I can tell, this is the CSS responsible for making the images cover (i.e. cover the whole panel, which makes the height of the image match the height of the panel, pushing the left and right edges off screen).
.n2-ss-slider .n2-ss-slide-background-image img {
object-fit: cover;
}
If you add this CSS, you should be able to override it:
.n2-ss-slider .n2-ss-slide-background-image img {
object-fit: fill;
}
Related
I have a problem with IOS devices. I think the cause is Safari browser, who's not showing my background image properly. It work on any other phone except the IOS devices.
I am trying to keep Position fixed, for the image to stick and scroll down when the user scrolling but the image instead of scrolling it is just zoomed to the maximum and cant see nothing beside small chunk of the img.
The code I am using for the image -
#media screen and (min-width: 375px) and (max-width: 812px)
and (-webkit-device-pixel-ratio : 3){
html, body{
width:100%;
overflow-x:hidden;
background-size: cover;
background-attachment:fixed;
background-image: url(./phone.jpeg);
}
Thank you guys really hope we can figure it out together !
I have a section on my website that uses a CSS background image. The website is here. You can see where I have the fixed background image in the "Contact" section. Here is the current CSS for the image:
#hs-contact-section {
color: #FFF;
background-image: url(../images/Chapel-interior.jpg);
background-size: cover;
background-attachment: fixed;
overflow: hidden;
}
Interestingly, if I use a browser inspection tool to simulate a mobile-sized window, the image is zoomed correctly.
But, if I access the webpage on an actual mobile device, it looks like this:
Is there something wrong with my CSS? I've tried searching online but haven't found any solutions that have worked.
It is more than likely because you are using a parallax effect which "does not always work on mobile devices."
refer to the note on w3schools
http://www.w3schools.com/howto/howto_css_parallax.asp
edit: if you want to swap our the image or disable the effect you can create a rule in your CSS
//768px is generally the max mobile pixel width
#media screen and (max-width: 768px) {
#yourId {
element: attribute;
}
}
what i am trying to do is here example is in fiddle
I have .carousel-inner{min-widt=500px;} for large screen size (I want it responsive though)
Now my problem is i want first carousel slider image to be at center-left position of my carousel from top and bottom. and caption is on right side center and viz.
I have tried this code... but when i go on smaller devices the images goes on the caption.
https://jsfiddle.net/xe05ro61/4/
You can add just width:100%; of your image, i think then after your problem is solved.
Try below css:
Css:
.item img {
width: 100%;
}
See Fiddle Demo Link
You will often need to use specific css rules for the small screen, to adapt your website to any browser size.
To achieve such a thing, the common way is to use #media .
To define a css rule that will target only screen with width under 640 px, use :
.myclass{
background:red;
}
#media screen and (max-width: 640px) {
.myclass{
background:green;
}
}
On PC screen, you will get a red background, on small mobile screen, a green one.
Now, replace these useless color definition by your position rules.
I have created a website that is both for desktop and mobile. But on mobile, you can not see the whole background picture (missing some of the cup) because of the nav. How do I get the whole picture. When you have slide down, you can se the whole background picture and the cup. Can some one help me with that, please? :)
My website: http://odsgaardklausen.dk/DBS/DBS.php
Create a media query for the body to specify changing the background-position when in mobile view.
#media (max-width: 767px) {
body {
(...)
background-position: center 50px;
}
}
The second value sets the vertical alignment of the targeted background, so in this case, you're pushing the image down 50px from the top of the body.
I should also note the media query is set to 767px to match Bootstrap's media query for the navbar.
As #Drew Kennedy says in the comment, but just wrap it in media query, otherwise you will have a white space on desktop.
#media only screen (max-width: 480px){
body{
background-position: center 50px;
}
}
I have a problem creating a responsive image (the cloud) using CSS. I want that cloud to be fixed.
This is my HTML:
<div class="r-img" style="background:url(./img/cloud.png); width:587px; height:330px;">
</div>
This is my css:
.r-img img{
top:30px;
right:5px;
overlow:hidden;
display: block;
}
I want the page to look like this:
http://imgur.com/NAsDsNy
When I use a lower resolution or CTRL + Scroll I see this:
http://imgur.com/OHSAvrE
I just want the image to stay fixed when someone use ctrl + scroll or when someone access the page with a lower resolution than mine. My resolution is 1920 x 1080.
You can try to use background-size with some percent value (e.g. background-size: 30%).
DEMO
Percent value here is a key: when using it sets background size relative to the background positioning area. When browser window zoomed this area changes accordingly. So visual effect is that image size is the same no matter what zoom level is.
Place the image inside a container whose dimensions are defined and then place inside the image and maximize it`s size to 100%.
img { position:absolute; max-width: 100%;}
That way, the image size will always change, but the changes will respect the dimensions and proportions of the container (parent). This is called image resizing under the scope of RESPONSIVE DESIGN.
To assign dimensions to the image container, use fluid grid dimensions, like:
.2_cols {width: 153px;}
or if want a 100% width:
.12_cols {width: 920px;}
Other method is to use a background image:
body.cloud {
background: url(/img/ban_home.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute; z-index: -1;
}
Everything is funnier with #media (into your css):
#media (max-width: 767px) {
// Your css (of the image) when you are on mobile
}
#media (min-width: 768px) and (max-width: 991px) {
// Your css (of the image) when you are on tablets
}
#media (min-width: 992px) and (max-width:1199px) {
// Your css (of the image) when you are on medium screen
}
#media (min-width: 1200px) {
// Your css (of the image) when you are on large screen
}
This could help you to handle your image better.
Just configure your size wherever you want:
.r-img {
width:587px;
height:330px;
...
}
Check out http://www.w3schools.com/cssref/css3_pr_background-size.asp for sizing a background image. Zooming into the page will make everything bigger, but people on smaller screens will see the image as the exact same size as you unless you use percentages on your widths and heights.
To test different resolutions instead of zooming in and out, just change the browser window to different widths and heights. Firefox and IE11 now have responsive tools to change the browser window to the different resolutions of screens which you can use to test your websites.