I'm not a css expert and struggling a bit with this need.
Consider this site
Right now the logo image is sized nicely for mobile but looks way too small for desktop browser.
If I change the size to look good on desktop browser it doesn't size down for mobile and consequently blows out to the right.
I feel these are the css settings involved but of course open to further instruction.
So the image size is 3800 X 1200
The actual image style I THINK should remain at 100% and not exceed 240px.
These settings will make it look acceptable for the mobile but then too small for desktop.
<img alt="Northern Legacy Auto" title="Northern Legacy Auto" src="http://localhost:15536/content/images/thumbs/0000020.png">
#media (min-width: 240px)
.header-logo a img {
max-width: 100%;
}
....
#media (min-width: 240px)
.header-logo a {
display: inline-block;
/* width: 195px; */
height: 118px;
line-height: 0;
background-repeat: no-repeat;
}
If I reverse the settings then it will look great on the desktop and blowout (not dynamically resize) on the mobile?
Thanks
Are you sure you are looking for the media query solution? You might can just get away with a responsive image. JSFiddle
HTML
<img src="http://placehold.it/200x100">
CSS
img {
width: 90%;
max-width: 240px;
margin: 0 auto;
display: block;
}
Related
I have a SharePoint Page with three of the following controls displayed horizontally as follows:
css is as follows:
.main {
display: flex;
flex-direction: row;
justify-content: flex-start;
.searchText {
width: 100%;
max-width: 330px;
margin-right: 25px;
}
.statusLabel {
margin-right: 25px;
margin-bottom: 8px;
}
.statusDropDown {
min-width: 300px;
max-width: 300px;
}
}
On zooming the page to 400%, the controls are not visible/get truncated as follows:
Is there a way to display the controls vertically on zooming to 400% without getting truncated and making sure all are visible?
This is what I tried so far:
css:
#media only screen and (min-width : 600px) and (max-width : 1200px) {
.searchContainer {
display: block;
.searchText {
width: 50%;
display: block;
}
.statusLabel {
width: 50%;
display: block;
}
.statusDropDown {
width: 50%;
display: block;
}
}
}
When you zoom the browser media queries use effective pixels to calculate whether they should be activated.
Effective pixels
Let's say your browser is 1366px wide (a standard laptop screen size at full screen).
When you zoom to 400% you effectively make each pixel 4 times larger, or to look at it another way, you make the effective width 4 times smaller.
So on a 1366px wide browser window at 400% zoom you effectively have a browser that is 341.5px wide (1366/4).
As such if you use media queries to make the site work correctly at 340px wide it will work at a browser zoom level of 400% on a laptop.
Make the site mobile friendly and you will have no issue.
Relevant WCAG Guidance
To comply with WCAG "Success Criterion 1.4.10: Reflow" your site should work at 400% zoom on a 1280px wide browser - which is equivalent to 320px wide. If you make the site mobile friendly (responsive design) using media queries at 320px wide minimums you pass the criteria.
I'm using MkDocs to generate docs using Markdown, and the theme Read the Docs.
However, I'm having trouble getting small images from scaling up on mobile phones.
I think this is linked to the Read the Docs CSS, but I'm having trouble understanding what should I do to override the behavior of setting width:100% on small screens.
The CSS applied to a certain image on a big screen (using chrome inspection) is:
.rst-content img {
max-width: 100%;
height: auto !important;
}
img {
max-width: 100%;
height: auto;
}
But if I reduce the screen, I get this extra CSS:
#media screen and (max-width: 768px)
img {
width: 100%;
height: auto;
}
I'm able to manually set the image size, for example:
<img src="/something.png" style="width: 25px">
But I would prefer if I could create some CSS to ensure that this is applied to all images, so I don't have to add this HTML tag on the middle of the Markdown file each time I want to add a small image.
Simply modify the media query (or create a new rule with higher specificity) to set the width of the images to auto for narrow viewports:
#media screen and (max-width: 768px) {
img {
width: auto;
}
}
I just want to preface this with while Bootstrap carousel is being used, it's been greatly customized (though not by me) to be used in a SharePoint web part. I feel like that's important to note since there's potentially a lot going on in this particular environment that does/could affect the CSS.
That being said, I'm having troubles making the Bootstrap carousel responsive. I moved a lot of the styles around, but this is the latest iteration:
#Carousel {
max-width: 400px;
}
#media screen and (max-width: 926px) {
#Carousel {
position: relative;
width: 100%;
height: 0;
padding-bottom: 40%;
}
#Carousel .carousel-indicators, #jbCarousel .carousel-inner, #jbCarousel .control-container {
position absolute;
width: 100%;
}
}
I want the #Carousel container to be at most 400px; I tried to keep its aspect ratio, too. This doesn't work, what happens is that it stays 400px no matter how the window is resized. And since the children I set above are at width: 100%, they're also set at 400px, so nothing actually changes in size.
I have two horrizontal tab images. I am moving my web application to display it in mobile.So I used responsive web design. I want the two horrizntal images to display inline. But when the screen width decreases, the second image is moving down. The image shrinks after moving down. I want the images shrink before moving down and it should not move down.CSS and HTML is given below.Please help.
.image-wrapper {
max-width: 100%;
height: auto;
display: inline-block;
}
<figure>
<img class="image-wrapper" src="~/Images/Q.gif" />
<img class="image-wrapper" src="~/Images/H.gif" />
</figure>
You can achieve that using Media query. Try something like this:
#media (max-width : 320px) {
.image-wrapper {
width: 100%;
height: auto;
display: block;
}
}
#media (min-width : 320px) {
.image-wrapper {
width: 50%;
height: auto;
display: inline-block;
}
}
As seen from the code, the tipping point beyond which the images will flow one below the other is when the available width is less than 480px.
try using media queries, they will only apply to smaller screens
#media only screen and (max-width : 760px) {
img{
width: 100%;
}
}
Hi and thanks for reading, am building this site http://myspacioclub.com and am using a wordpress responsive theme, and I got this image "bannerfb" with class "banner" that was asked for the customer. So inside the space for the logo I create a new div to put the banner and added this properties to the div of the banner:
.banner {
position:relative;
top:-170px;
left:450px;
}
but as the theme is responsive, when i make windows smaller like the size of tablet or cellphone the layout breaks, can someone help me?
How could I fix the theme that only use the banner properties when the window is in a bigger resolution, or any similar solution but the idea is to keep the banner with those properties without been affected by the smaller size.
You can achieve this different ways, but one way is following: First wrap your logo and banner in a div
<div class="wrap">
<div class="logo">
<a href="">
<img src="http://myspacioclub.com/wp-content/uploads/2013/04/Myspacioclub.png"/>
</a>
</div>
<div class="banner">
<img src="http://myspacioclub.com/wp-content/uploads/2013/04/bannerfb.jpg"/>
</div>
</div>
Then add following CSS:
.wrap {
position: relative;
width: 100%;
}
.logo {
width: 50%;
float: left;
}
.banner {
width: 50%;
float: right;
}
.banner img, .logo img {
width: 100%;
height: 100%;
}
You can see working example in here. Also, I have to point out, that at least at the moment you are using more than 7000px width image in your banner. This is NOT what you should do. You banner, at least in with my screen, is 700px wide. DO NOT ever use bigger images than you need. It shows 700px wide image, but you still have to load the 7000px one. Convert to smaller size! If you necessarily need bigger image for big screens, you could use javascript or css #media tag to load different image for different screen size. For that you have to set your banner image as background not as <img> and then do something like this in CSS:
#media only screen and (min-width: 35em){
/* Style adjustments for viewports that meet the condition */
.banner { background: url(path/to/image); }
}
You can set many steps like this. Just add another one, change the min-width and load different image to background.
So in your page you have to do following in CSS:
#media (min-width: 1320px){
.span8 { width:1178px; }
}
.name-logo, .banner { width: 50%; }
.banner img { width: 100%; height: 100% }
.name-logo img { width: auto; height: auto; }
.name-logo { float: left; }
.banner { float: right; }
Trick with responsive layout is to use percentage values not fixed pixel ones and do not use negative margins if possible.