I have a background image on a big div below the fold... when I load the page on my iPhone and I scroll down, the image shows up only after I scroll past the top edge of the div (a small delay essentially)...
It does happen only mobile.
I'm wondering if it's because the photos are too heavy or else...
Any help is appreciated!
Your image has a very big size.
You have to make image size smaller and load it only for tablets/mobiles.
CSS code will be like this:
#media (max-width: 768px) { .mydiv { background-image: url('images_folder/smaller_image.jpg')}}
Related
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;
}
I have a div with a background image set to it. It looks completely fine on smaller mobile screens.
However, as I move to larger and longer mobile screens, the image overflows from the sides. Basically some part of the image gets cut on larger mobile screens. How can I prevent this? And can I do it without editing the image itself?
Here's the website: https://www.elevarsports.com/pages/elevar-arc-racer-v2-beta#
This is the class to look at .es-element-hero-imgtxt-mobile-img.
I have already tried setting max-width: 100% but that doesn't do anything.
These are examples:
iPhone 6/7/8 (how it's supposed to look on all mobile screens
iPhone XS Max (how it looks on bigger and longer screens)
Note: I'm using Firefox as my browser.
You could try something like:
#media (max-aspect-ratio: 720/900) {
.es-shoe-landing-hero .slide-1 {
background-size: contain !important;
background-position: top !important;
background-color: #000;
}
}
This changes how the first hero slide's background image is sized and positioned. 720/900 is the dimensions of the image and is being used to determine an aspect ratio at which this style is applied.
However, then your problem becomes that the image isn't tall enough for the view.
I have been working on this site below and I am trying to get the banner that is displayed under the navigation menu responsive where you can still see the player in the banner once you scale down to iPhone size portrait.
The code for this area is in the css here.
.tp-page-header {
background-image: url("../images/page-header.jpg");
background-repeat: no-repeat;
padding-bottom: 20px;
padding-top: 20px;}
Website link is here.
http://dagrafixdesigns.com/2019/industrial-darker/about-us.html
This banner is under each sub menu link, other than the home page as it has the slider. I am not sure if anything can be done to the CSS code to make it responsive or it has to be in the HTML as something like the top banner is done.
I have tried it to a degree in the HTML manner, but I didn't have luck.
Not a huge deal as I can get a image color or css color for this background if this wont work, but was thinking it would be nice to use if it responds on scale.
Thank you
Try a combination of background-size: cover; and background-position: 80% 0;. background-size will size the image down to match the container size when it's resized, and background-position will move to the right a little on the x-axis so you can see the football player's head.
I would say to make a smaller version of the image for ex 480 is the iPhone's pixel size, so make it 40 and center it. To show the image when they scale down, use #media (max-width 480px) and inside of the block, set the background image to the new one
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.
My designer just gave me website which I need to use different images with z-index on them on both side of website. The image that I used on the left side is fine but the one on the right side shows a scroll bar on the bottom when opened on smaller screen resolution (below 1920 width).
So How can I get it right?
Take a look http://whitepixelstesting.com/sunexim/
You should have used background image, it would have been simpler.
But it this case, I would recommend you to use a CSS Media Query.
By adding overflow: hidden to your #main_wrapper, you solve the problem for screens between 1920px and 990px. If you keep the hidden overflow, you will hide your content for those below this screen width. That's why you should add this at the end of your Style Sheet:
#media all and (max-width: 991px) {
#main_wrapper {overflow: visible;}
.right_bg {display: none;}
}