There are multiple places on our website where we are using .svg's with the background image rule to create shapes.
For example:
&:before {
bottom: auto;
height: 4rem;
content:'';
display: block;
width: 100%;
position: absolute;
left: 0;
top: 0;
background-image: url('img/layout/press-before.svg');
background-size: 100%;
background-repeat: no-repeat;
#media screen and (max-width: $viewport-xs) {
height: 2rem;
}
#media screen and (max-width: $viewport-sm) {
top: -.1rem;
}
}
This works well on desktop on all resolutions.
But on several mobile devices using chrome there is an issue when the adjected block has the same color.
There seems to be 1 or several pixels which are being interpolated incorrectly which leads to an edge of the underlying element showing.
Things I've tried:
+ use png, jpg instead of .svg to see if the problem relates to the rasterisation of .svg (problem persisted without difference)
+ moving the image up sligthly (line remained)
+ making it slightly larger (line remained)
For reference, see the following images.
issue example 1
issue example 2
Any suggestions are greatly appreciated!
The solution for me was to move the image up a little by adding top: -1px to the pseudo-element.
I tried this before I posted this question here and it didn't work.
This was related to the fact that the parent of the pseudo element was using overflow-x: hidden and because of this the overflow-y was automatically also hidden (I'm adding this for anyone having a similar issue).
Of course this means I need to tweak the shape of the svg's a little because it has moved up 1px.
Related
I have created an html document. Inside this I've imported an image under a paragraph. But whenever I change the resize my browser. The image disappears by moving below the page.
The image is given inside a card.
.Card{
border:none;
font-family: 'NCS Radhiumz';
border-radius: 15px;
background-color: #000000;
width:90%;
height: 85%;
margin-left: 80px;
padding-left: 5%;
padding-right: 5%;
I just want everything on the page to resize without disappearing from the page. I'm very new to coding.
Anybody know how to fix it?
What you're most likely missing is some styling on your image element. Try this in your css file:
img {
width: 100%;
object-fit: contain;
}
You can experiment with different ways to fit the image in your component. Check out these docs for some options.
you're asking for responsive web design. You can achieve that by implementing CSS Media Query.
Learning source:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
If you want your image to be in one place and don't move you can do that with position style in css like so:
.element {
position: fixed;
}
or
.element {
position: absolute;
}
But image moving below is normal since the browser can't fit the image besides the text.
If you want your image to behave differently you can do that by using #media query and manually write how the app should change based on screen width/height. But generally the best way to do so is using flex-box or grid, since the browser automatically does object moving for you.
I've searched just about every string of words possible to try and find a solution to this issue and have had no luck. Here's the code I have for the header:
/* MAIN HEADER */
.header {
background-image: url(../images/kt-header2.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-position: fixed;
background-size: cover;
margin: 0;
padding-top: 0em;
padding-bottom: 5em;
overflow: hidden;
width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
This is what the header img looks like when the browser is smaller.
This is what it looks like when the browser is larger.
For all I know, this is a mess and the solution is obvious. I've been trying to piece things together with no previous knowledge of css, so I'm flying blind here.
I have linked a recreation of the code as a comment under the first comment on this post. Because I am a new user, I can't put more than 2 links in this post.
Did you try to add a set height to the header? If you add the set height, it won't be overcome by the other elements on a larger browser
I added: .header{height: 100px;) (used another image)
https://jsfiddle.net/toolbox3/8Lbdx2fm/
I have been reading many solutions to this and tried most of them, but unfortunately I cannot get it like I want it working for all browsers.
What I basically want is to automatically crop images (from the center) to a defined aspect ratio. This should apply to "portrait" images (cropping on top and bottom) and also to landscape pictures (cropping left and right). It has to be responsive so that the images will always have the desired with (and height using the aspect ratio).
It is described well here: Center Crop Images but as in that solution I do not know if the picture will be to wide or to high.
I also cannot and don't want to work with background images.
I could get it to work to crop on top and bottom but when the image is wider than the desired aspect ratio it will "crunch" the images to look distorted.
Here is one of the solutions that worked partly:
/* wrapper div */
.iw-so-article-thumb {
position: relative;
overflow: hidden;
/* text-align: center;*/
/* ensures the image is always in the h-middle */
border: 3px solid black;
}
/* create an aspect ratio of the wrapper */
.iw-so-article-thumb:before {
content: "";
display: block;
padding-top: 100%;
}
.iw-so-article-thumb img {
position: absolute;
top: -100%;
right: -100%;
bottom: -100%;
left: -100%;
margin: auto;
display: block;
min-width: 100%;
min-height: 100%;
object-fit: cover;
/* necessary to fill the frame/rescale the image */
}
This worked using "object-fit: cover" but not in IE/Edge as I found out (there pictures will be "crunched" when cropping should happen on the sides.
Like I said I tried many other solutions I found in forums/blogs but some didn't even work at all.
I suspect the cropping on the sides for wide images fails because the aspect ratio in the image wrapper is defined by the ratio of height to width, so the wrapper will take a responsive width and adapt the height (then crop by "overflow: hidden"). But when the image is wider than the aspect ratio it cannot handle this.
I am not sure if there is a pure CSS solution that works for all browsers including IE/Edge, I suspect there isn't, but I am happy to be taught otherwise.
I have a background image of a paper airplane on the body tag of this page: http://cogo.goodfolk.co.nz. The very tip of it is being cut off - if you resize the browser window the full image pops back in.
It's only happening in Chrome, and isn't consistent, if you refresh sometimes, or even hover over sometimes it's fine. If I remove all the background styles (background position and no-repeat) then the whole image is there - but of course isn't positioned correctly. It's also happening on other pages of my website (eg http://cogo.goodfolk.co.nz/online-surveying).
After days of debugging/searching I can't find anything that refers to this issue and/or fixes it - is it possibly a Chrome bug with background-position?
Any ideas or workarounds? Thank you!
//EDITED//
The relevant code is pasted below, although obviously this is pretty standard so it must be something else in the site that's causing the problem:
.home {
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
background-position: 10% 98%;
}
The background image is set to center, so this is expected behaviour, depending on window size. You could change this CSS declaration from:
.home {
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
}
To:
.home {
background: url("../img/airplane.jpg") no-repeat center top;
background-size: 70%;
}
This would anchor the image to the top of the screen, meaning it would not clip, but this may not be the behaviour you are looking for.
To complicate matters, you also have this, which is probably contributing to the problem. I would suggest removing it entirely:
#media (min-width: 1200px)
.home {
background-position: 20% -10%;
}
Yay thanks to everyone who left suggestions, fortunately I've figured out a workaround! I managed to pretty much keep the background styles the same, and just placed everything in a :before pseudo element on the body tag. You can check out the updated code at cogo.goodfolk.co.nz if you're interested, or it's pasted here:
.home {
position: relative;
min-height: 860px;
}
.home:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
background-position: 50% 15%;
}
Set the display to "inline-table".
I have a modal div on my page, which grays out the background. If I set the height of overlay div to 100%, it works fine on IE (desktop), but on iPad Safari, the complete height is not grayed out. What exactly is the issue? Is it to do with fixed position/viewport? Please help. Below is the CSS for the same;
#TB_overlay {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
.TB_overlayBG {
background-color: #000000;
opacity: 0.4;
}
Hi the easiest way and that's how I do it is to give maximum height width to the overlay. Like:
.overlay{
position: fixed;
display: none;
top: 0;
left: 0;
z-index: 99;
width: 10000px;
height: 10000px;
opacity: 0.5;
background: #ccc;
}
You can put this at the bottom i.e. before body tag and change its display to block whenever you want to gray out the background. Obviously whatever you want to show on top of it must have a greater z-index. Hope this helps. Let me know if you don't understand.
The device height and width need to be set, you can use iPad specific styles to achieve this, so that it doesn't break your other browsers.
Reference: http://css-tricks.com/snippets/css/ipad-specific-css/
Without seeing the it, its hard to say exactly what the problem is but try using the above css to apply specific css to iPad Safari.
Your issues:
Most mobile browsers ignore position:fixed
Window sizes and viewport sizes are handled differently, so the position:absolute;... trick doesn't work also -- you have to dynamically size your div in script by reading the size of the viewport, or make it large enough to cover all potential page sizes