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;
}
}
Related
So I was working on a static website that uses only HTML and CSS. I made the website in desktop view so when screen size is more than 1220px the website will look exactly as I want it to. For selecting services I have a picture as a background and some text inside it. The dimension of picture is 420x469 px. I have a total of 4 pictures and I put them in pairs of 2. So like this (Service 1) (Service 2). I have padding of 7.8% on both left and right side and 8% padding on bottom. Currently if someone access my website from mobile, then service 1 shows with 7.8% left side padding and half cut picture. Then service 2 below it just like Service 1.
What I want is that when someone uses website from phone, they see the picture completely and no padding. and if there is enough space, then some padding pls tell how i can do that
Have a look at these Docs here:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Then you can use CSS like this
.my-class {
/* Mobile - Desktop */
padding: 10px;
}
#media only screen and (min-width: 600px) {
/* Tablet - Desktop */
/* It will overwrite the other less specific classes padding */
.my-class {
padding: 30px;
}
}
<div class="my-class">
<h1>My Content</h1>
</div>
Bonus tip: Don't work with max-width in general, but with min-width. That means you will be working mobile first.
in css add this line it will work perfectly in any screen size
.service1{
width: 100%;
height: auto;
}
Define a #media query specifically for 'phones' like this :
#media (max-width: 640px) { /*...*/ }
You may want to remove the padding/margin for any smaller screen sizes. Try like this:
#media (max-width: 978px) {
.container {
padding:0;
margin:0;
}
}
Otherwise, Try using bootstrap it works very well in Adjusting margin/padding with screen size.
I am using wordpress to develop a website called littleboyauciton.com. I added an image at the top right of my header, and added css code:
img.sslsecure {
max-width: 40%;
min-height: auto;
}
This is displayed normally on my computer screen. But when I use chrome to simulate the ipad screen, the picture cannot be displayed on the header.
I added the css code corresponding to the screen in css, but it still has no any effect:
#media only screen and (max-width: 768px) {
img.sslsecure {
background-attachment: scroll;
}
It is doing exactly what it should do, it takes up 40% of the width of it's parent div. When you inspect the element, you can see that the parent actually almost takes up 100% of the screen width.
You can fix this by adding extra css for different screen sizes. This can be done in the theme you are using.
Or you can add extra css and write a media query yourself.
See:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Edit.
I just saw that you've tried adding a media query. You did it right, yet you have to change the width of the element or the parent element. background-attachment: scroll; only applies to elements with a background-image. Since this is an img, it doesn't apply to this element.
Let'say, I don't want the image to be wider than 100px:
#media only screen and (max-width: 768px) {
img.sslsecure {
max-width: 100px;
}
}
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'm new to using #media but i am trying to get a webpage to respond centered for smaller devices only. while the larger width display can remain normal.
my webpage is mastercontrolunit.com and seems to appear fine on desktop view. but on phone for example the view starts all the way to the left, when i would prefer it to start centered.
Thanks!
You can set a media query for this, like below:
#media only screen and (max-width: 600px) {
body {
text-align: center;
}
.centered-el {
margin: 0 auto;
}
}
Change 600px to be the width of the screen you want everything to start being centered at.
Within this media query, you write your CSS to make things be centered.
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.