I noticed that whenever I resize my screen, it somehow recalculates the size of my image and makes it blurry. This happens instant in chrome, but after resizing in safari. I have been trying to wrap my head around this for a while now but I can't seem to fix it.
What is causing the blurring?
I've quickly inserted only one of the images but this happens with all.
Code is based on Zurb's Ink.
https://jsfiddle.net/bnL1tyku/
img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
max-width: 100%;
clear: both;
display: block; }
Related
I have a header and footer background images to display in my page and I need to make the HTML header and footer run as wide as the table width (especially for mobile browsers). Currently it runs as long as the width of the PC Browser but not the mobile browser.
CSS:
<meta name="viewport" content="width=device-width, initial-scale=1">
body {
font-family: Calibri, Calibri, sans-serif;
}
header {
background-image: url(header.png);
height: 446px;
align: right;
text-padding-top: 30%;
background-size: 100% 100%;
}
section::after {
content: "";
display: table;
clear: both;
height: auto;
}
/* Style the footer */
footer {
background-image: url(footer.png);
background-size: 100% 100%;
text-align: center;
color: black;
}
#media (max-width: 800px) {
nav, table {
width: 100%;
height: auto;
}
}
a:hover, a:active {
color: green;
}
You're using a table, which is at width: 100% but its parent isn't, and therefore is taking the maximum width (full size image + text).
If you put width: 100% on your section, you'll achieve what you want.
After doing that, your images are too large for mobile, and are taking more space than the screen size, you should reduce their width.
Several other points you should follow:
A CSS file, apart from your HTML, would be nice, it's good practice except if your css is very small. As I'm guessing you're not done, you should definitely put it in a separate file.
You are using some CSS that does not exist, I would advise you to use an IDE (like Visual Studio Code) to help you write code.
Inline CSS is bad practice, as you're already using a stylesheet in your HTML, you should use it (or see the first point).
Please next time, take some time to make a code snippet that is easily editable by everyone and provide a full "working" example of your problem.
I get this vertical white line on the right side of my page.
it's only happening on mobile. found it using device tool bar: https://jood19.sg-host.com/
I designed the website "mobile-first". only used media queries for desktop.
I've tried, without success, the following code
html body{
width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
can you recommend something?
It's because your image has a set width which happens to be wider than the mobile screen.
You can keep the set width if you add a max-width to the image. This will mean it will be the same size as you originally had except for when the screen is too small for that and then it will take up the full width.
.about-section img {
width: 28rem;
max-width: 100%;
}
Setting your .about-section img on the dev tools seem to remove the whitespace. Tried with 21 rem on mobile screens.
.about-section img {
width: 21rem;
}
I have searched for similar posts but have not found a working solution.
I'm trying to hide the scrollbar on smaller screen devices while still allowing the user to scroll left to right.
Here is my current styling:
#include media-breakpoint-down(xs) {
overflow: auto;
width: 320px;
display: -webkit-box !important;
display: -moz-box !important;
-webkit-scrollbar {
display: none;
}
}
Setting the display to none will actually make the scrollable area disappear.
I have a series 8.5" x 11" # 72ppi magazine pages exported from InDesign as jpegs that I wish to display within Blogger posts. I want to display a 1 pixel border around each of these images so the edges of the pages are more easily discerned. I am testing the mobile version of the Blogger site in Chrome's emulator.
The images are correctly be resized to fit the mobile device; however the right and left borders are being cut off. Sometimes the page will load with one border showing, but the opposing border is then 2 pixels off screen. Sometimes when I reload the blog, or change devices, the borders might appear correctly, but then start not appearing once again. How do I make sure the images are correctly resized with the border on each side
.post-body-container img {
border:1px solid #000000;
padding:0px;
width: 612px;
height:100%;
display: block;
}
It's better to not have a fixed width if you want responsiveness to work.
.post-body-container {
max-width: 100%;
}
.post-body-container img {
border:1px solid #000000;
padding:0px;
width: 100%;
height: auto;
display: block;
}
Example (try resizing the page to see the image size changing): https://codepen.io/felipefreitag/pen/EbXxjx
Further reading:
https://www.w3schools.com/css/css_rwd_images.asp
Thanks for the replies. I slightly modified the supplied code by adding a margin. This works for all the devices in the Chrome emulator except for the two Nexus devices, which keep scaling the images so as to cut off the left and rights borders. This could be a problem with the emulator. Another solution which works on all devices is to add a 1 pixel border graphic inside InDesign and export the images with a 1 pixel border.
.post-body-container {
max-width: 100%;
}
.post-body-container img {
border:1px solid #000000;
margin:2px;
width: 100%;
height: auto;
display: block;
}
For an assignment I need to write about why various things work differently on my website when it comes to viewing it in different browsers. One of the differences I've found is that in IE10 where I made images smaller to fit on the page, IE ignores that and only scales the image with Width: %; Here is the code for the image:
<img class="image" src="images/tcp-ip layers.gif" />
.image {
display: block;
margin: 0 auto;
height: 30%;
width: 30%;
border: 1px solid #E5E4E2;
margin-top: 10px;
}
Does anyone know why IE doesn't scale down the image like Firefox would?
Edit: it works the same in Firefox as it does in Chrome, It's not good code I agree, I should of used auto's etc. But I just need to figure out why it resizes it differently in Firefox. (if anything IE10 resizes it better but its too late to make the amendments I should of)
Image scaling using bicubic interpolation is turned off in IE per default, every other browser has that on by default. Try to fix this with:
-ms-interpolation-mode: bicubic;