I am fairly new to coding and need some help. I have a bootstrap website where the slider does not re-size to mobile devices or tablet sizes.
The code in the CSS I have added are:
img{ max-width: 100%;}
iframe{ border: 0; width: 100%;}
and
what am i doing wrong?
.img{
width: ....;
height: ....;
}
#media all and (min-width:900px){
.img{
width:....;
height:....;
}
}
so this is css code. the first .img by itself is what it will look like on a phone for example, the # media tags is what you use to change the size of stuff when the screen size gets above the min-width size. I suggest using firefox as it has a nice responsive view so you can change the screen size to see what it will look like on a smaller screen
Related
I have created a website and there is an image (640x640px) but on mobile you have to side scroll in order to see the full picture. Does anyone know how I could change the size on mobile but make it stay the same on desktop?
this is what i have so far
<pre>
<div>
<img style="object-fit: scale-down;" src="gifs/preview.gif">
</div>
You want to use:
img {
max-width: 100%;
}
so what you can do fir this is to give the image a classname and then use that classname within a #media query
#media only screen and (max-width: 600px) {
.classname {
width: 200px;
height: 200px;
background-size: 100% 100%;
}
}
and then give it whatever size you feel works best for that size you want to achieve
try incorporating #media queries into you css file. It will look as follows:
#media only screen and (max-width: 600px) {
img {
width: 50%;
}
}
So in the above code we are creating an at media query which will trigger when the screen is less than or equal to 600px, then the following will happen, which in this case, is it will take only 50% of the parent div.
Here is a resource if you still do not understand: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Hope this makes sense :D
So, I want to create a header image for my site. I want it to be responsive and I'm taking the 'mobile first' approach. I have a picture, and as title suggest, I want it to be displayed differently based on device's display size BUT it still has to be the same image file. For example, on mobile I will see only small part of the image, but as soon as I hit certain width, it will change to full size. This site http://adopciaki.pl has exactly what I want - I tried to replicate their layout but to no avail. Thanks for help!
there're several possibility's to achieve this, for example, on mobile:
img{
position: relative
width:auto;
height: 100%;
left:50%;
transform: translateX(-50%);
}
this will position the image centered, give the wrapper element a overflow hidden
then on tablet or desktop you can set the width to 100% and the height auto and so on...
One solution would be to use an SVG copy of the image and use CSS media queries to size it based on the screen size - https://jsfiddle.net/rkr9psbf/1/
#media (min-width: 1200px) {
img {
width: 300px; height: 300px;
}
}
#media (max-width: 600px) {
img {
width: 150px; height: 150px;
}
}
You'll see the image shrink to half the size by making your browser window smaller. Hope this helps!
I have picked up development on a site using Visual Composer in a Wordpress theme (Jupiter). On most pages there is a full width row with an image that maxes out at 1600px wide. The client doesnt like how small the photo shrinks as the browser window/mobile reposnse gets smaller.
http://spiderman.ephronsystems.com/full-width-tester/
I added this CSS in a mediaquery:
div.vc_single_image-wrapper.vc_box_border_grey {overflow:hidden;}
img.vc_single_image-img.attachment-full {height: 200px;width:auto;max-width:none;margin:0 auto;}
This seems to work pretty well but I would rather the image was centered in the browser window. Anyone know how to fix this? I can also replace the VC coding with straight html.
add margin-left: 50%; and transform:translateX(-50%); on the img at the following
#media (max-width: 736px) {
.wpb_single_image img {
height: 200px;
width:auto;
max-width:none;
margin:0 auto;
margin-left: 50%;
transform:translateX(-50%);
}
}
query
So, i'm a beginner html/css coder and trying to make a simple site.
Now I have a neat background that behaves perfectly.
But when adding a logo at the top center it looks perfect on the current window size. But when I resize the window, half of the logo is cut off.
My CSS style:
.header-logo {
background: url(images/header-logo.png);
position: relative;
height: 200px;
margin-left:auto;
margin-right:auto;
background-size:cover;
width: 971px;
z-index: 2;
}
I suppose there is an auto scale css/js setting for that but i'm not lucky enough to find it.
All help is appreciated!
Louis
The issue is these two lines of code:
height: 200px;
width:971px;
When you use "px" it's a fixed amount of pixels which means it doesn't change based on screen size. If you use "em" instead then the image will change based on the screen size of the visitor.
Here are two quick references that I hope may be helpful.
http://www.w3schools.com/cssref/css_units.asp
http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
To fix it you might do something like this:
height: 100em;
width:486em;
(Don't use my exact values of course.)
EDIT:
Alternatively it may be good to use a percentage like this:
width: 971px;
max-width:100%
EDIT 2:
It was pointed out to me that you'd probably want to include this line as well:
height:auto;
It happens because your width is setted to be fixed on 971px, you should use width: 100% and set max-width or at least use #media to set your logo width.
using #media:
#media screen and (min-width: 480px) {
.header-logo{
width: 250px;
background-position: center;
}
}
It seems like you want a 971px wide logo and you have an issue when the screen size is less than that because the logo gets cut off.
What you need is a media query like this one and place it at the end of you css
#media (max-width: 971px) {
.header-logo {
width: 100%;
}
}
That way any screen size under 971px will change the width property to 100% of screen size.
You don't need to redeclare all the properties of the class in the media query, it will just change the ones that have to adapt to the new screen size.
Read more on media queries here : https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
I recently saw a link, on twitter, to path's new website; with.me. There's some pretty simple but neat things occurring on a with.me page, for example look at this one of Ashton Kutcher:
http://with.me/w/2275
My favorite thing on that page is how the picture appears to snap to a minimum and maximum size. When you resize the browse, you will notice that the image will eventually shrink to a smaller size in a "snapping" fashion. It doesn't resize with the browser, it instantly goes to the smaller size if the bigger one can't fit in the browser window.
How are they doing this? I've been poking around the CSS for the past two hours. I have a test page of my own that I've been trying to get this to work on, but can't figure it out.
Any ideas?
#ryan; it's a css3 media query .
if the check the link source then you saw he you it in there css
#media screen and (max-height: 720px), screen and (max-width: 850px) {
#page.permalink {
height: 454px;
margin: -247px auto 0 auto;
}
#page-container {
width: 650px;
}
#photo-container {
margin-left:-370px;
}
#photo {
height: 454px;
width: 340px;
background-size: 340px 454px;
}
}
check this
http://css-tricks.com/css-media-queries/
It's done by applying different stylesheets based on screen size:
#media screen and (min-height: 1000px) {
If you're using a webkit-based browser (safari / chrome), it actually animates between the two using a webkit animation.