Im not quite sure how to adress this problem because its solely happening on the mobile chrome browser.
The Problem:
So as you can see on the image there are gaps around the divs where the background is shining trough. The setup of the code is the following:
<div className={classNames(
scss[timeline-item},
scss[inProgress]
)}
>
<img
className={scss.icons}
src={require(`../../../../assets/images/icons/${icon}.png`)}
alt={icon}
/>
</div>
class of the Div:
.timeline-item{
border: white;
flex: 1;
background: url(../../../../assets/images/iconBgSmall.png) repeat-y center;
display: flex;
justify-content: center;
align-items: center;
background-color: #b3b3b3;
>
(Note here when border is set to 0 then i get the same error in the desktop version of chrome, so i set it to white).
When a step is done an additional class gets rendered into the dom of div:
.done {
background-color: black;
}
.inProgress {
background-color: green;
}
Image as Background
to see the image click on it to open in new window (transparent/white)
So as you can see the idea is to use the background color to show the actual state of the timeline. The background image of the div is way bigger than the div itself so it cant be because of the image size.
Already tried:
content: ' ';
border: 0;
Removing box shadows (even tough it doesnt have one).
Negative margins
outline: 0
Removing all the background colors would work but then my functionality is gone.
HTML/CSS Snipped
This is basically the exact code i took and then let it be mapped with mockup data. As you can see here nothing is happening so i dont understand where this error can come from.
https://codepen.io/anon/pen/EeOZVN
Hope somebody can help!
Thanks in advance
Related
when i adding border width greater than 1px white space is creating around image
here
https://front-end-mentor-works.github.io/e-com-product-page/
these images (below the main product image )in the boxes are not completely filled to those boxes .
i want to acheive ( the original design ) 👇
https://github.com/front-end-mentor-works/e-com-product-page/blob/main/design/desktop-design.jpg
i checked in developer console there is no margin and padding.
and i tried solution like setting font size: 0 , and making background similar to border color
font-size:0
making background simlilar to border color
display:block
4.vertical align:top
i have hosted my code on github pages
https://front-end-mentor-works.github.io/e-com-product-page/
repo link
https://github.com/front-end-mentor-works/e-com-product-page
How to remove this white space around image?
i have tried the solutions of this question
similar question Space between image and border
and other similar questions none of them is not removing the white space?
my code is
`
.product-thumbnail-box {
display: flex;
width: 80%;
gap: 6%;
margin-top: 2rem;
}
.product-thumbnail {
width: 20.6%;
border: none;
border-radius: 0.8rem;
&-active {
display: block;
border-radius: 8px;
border: 2px solid $Orange;
background: $Orange;
filter: opacity(0.3);
}
}
[1]: https://front-end-mentor-works.github.io/e-com-product-page/
Have you tried anything with the background-size property?
https://www.w3schools.com/cssref/css3_pr_background-size.php
If you haven't, I'd start with that and see what you can come up with.
I've created three circles that are used for the dot controls/pagination on an image slider. For some reason on page load in Chrome they always appear first as squares and not as circles. Once you interact with them they then turn to circles. How can I get them to be outlined circles on page load? (if i just fill in the circles with a background they work and are circles on page load but I want them to be outlined circles on page load)
Any ideas? Thanks!
.flex-control-paging li a {
display: block;
cursor: pointer;
text-indent: -9999px;
margin: 0 8px;
height: 8px;
width: 8px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border: 2px solid #b6b6b6;
}
Thanks for the help guys! I figured out what the issue was but I don't quite understand why. I added an overflow to the dots and this took care of the bordered showing up as a square rather than a circle like I wanted on page load.
overflow: hidden;
I don't know exactly what do u mean.
But I think issue is html of slider creates dynamically via js on dom or page load event, so css applied with some delay.
Check source code of your page with right click->view source to ensure.
Try to call your slider plugin immediately after slider container, not at the end of page for ex.
I'm showing a triangle next to some text inside of a container with display:flex. The text's width is not known at design time. The browser will calculate the width needed for it upon rendering. I've provided code below which highlights my scenario.
The issue I'm encountering:
On initial render .triangle-two's position is not correctly determined. The browser appears to not know the width of .text quite yet and so it incorrectly positions .triangle-two until a second rendering pass occurs. Just a moment after rendering .triangle-two shifts to its correct position.
By contrast, .triangle-one does not exhibit this issue at all. I presume that this is because .triangle-one is rendered as text, and thus in the same pass as .text where as .triangle-two is rendered at a different point-in-time making it ineligible for the proper positioning.
Of note, if I apply justify-content: flex-end to .container then this issue does not occur because .triangle-two is positioned first and then .text. So, it's a non-issue when going the other direction.
Is this a common problem? Are there any more elegant solutions?
Note: I'm unable to reproduce the issue with my example provided, but I'm unsure why. I feel confident that this example highlights my issue, but perhaps it's also dependent on page initialization.
* {
box-sizing: border-box;
}
.container {
height: 48px;
display: flex;
flex: 1;
align-items: center;
padding: 8px;
}
.text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.triangle-one {
transform: scale(1, .5);
}
.triangle-two {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid;
}
<div class='container'>
<div class='text'>
Dynamic text
</div>
<div class='triangle-one'>â–¼</div>
<div class='triangle-two'></div>
</div>
Ended up figuring this out the next day.
The issue is that I have no text on the page on initial load and then append a bunch of views to the page which have text on them. I'm also using a custom font face.
Since there's no text on the page on initial load - the font face isn't loaded when the views are appended. So, the text shifts around once its font loads causing its shape to change. Then, the triangle next to it needs to reposition.
I have created the following website http://www.nabresco.com from an html based theme.
Im definitely no expert in coding bit i figured my way out in order to edit it to my needs.
The website is up and running now and is looking good.
There is only one problem left that i cannot seem to figure out.
The pictures in the galleries are acting as if they are black and white and become coloured only when the cursor is on the actual selected picture. This is happening on some coputers and on others im viewing it normally (weird?).
I want to change them to all be colored all the time without having this black and white effect.
The code on the html for these pictures is as follows (showing first pic in the gallery code):
<div class="preloader">
<a class="bwWrapper single-image plus-icon" href="images/projects/al-rawi/5.png" rel="folio">
<img src="images/projects/al-rawi/5.png" alt="" >
</a>
This shows the pictures whith a plus sign that you can click on.
The css code is as follows:
/* -------------------------------------------------- */
/* Images
/* -------------------------------------------------- */
.single-image {
position: relative;
display: block;
margin-bottom: 15px;
}
.bwWrapper {
position: relative;
overflow: hidden;
display: block;
im quite lost now as i dont know if there is something that i need to change from the CSS file or not.
Thank you,
Rashed
Try it with
.BWfade{
display:none!important;
}
Should work. (tested in Firefox)
I have CSS with an image
.backgroundImg {
background: url('./path/file.gif');
background-repeat: no repeat;
width: 24px;
height: 24px;
}
.ui-highlight {
border: 2px solid green;
color: #363636;
padding: 0.7em;
}
I have div tag which imports this class
<div class="ui-highlight ui-corner-all">
<div class="backgroundImg" style="float:left;">
some text.........
</div>
</div>
EDIT
I am trying to achieve a bordered box with image on the left and text on the right of the image. I inspected the element and the image shows up when I hover over the ui-highlight class
I know css and honestly I am not a pro at it. Can someone help me why the image doesn't show up
UPDATE
After adding width and height to the backgroundImg class the image is visible.
The first thing I would do is use Firebug for Firefox or the Developer Tools in a Webkit browser to inspect your situation.
Right-click on "some text...." and choose Inspect Element.
In the HTML inspector click on the div with the class "backgroundImg"
On the right hand side you should see the CSS inspector for this element. Hover your mouse over ('./path/file.gif') and see if the image thumbnail loads. If it doesn't you may have the path set-up incorrectly.
Hover over the div in the HTML inspector and see how it highlights on the page. It may be that your div isn't taking up enough space to reveal the image. If this is the case you'll need to set a width/height or put more content in the div to fill it out.
The jQuery UI classes on your parent div (ui-highlight ui-corner-all) might be setting some styles that obscure the image in the child div. Make sure to inspect this with the HTML/CSS inspector as well.
What you're trying to do from your code is give the text with the background of the image. It works, but not in the way you're intending. Replace the backgroundImg div with an tag in the HTML, with the "align='top'" element. The code I've got is:
<html>
<head>
<style type="text/css">
.ui-highlight {
border: 2px solid green;
color: #363636;
padding: 0.7em;
}
</style>
</head>
<body>
<div class="ui-highlight">
<img src="path/img.gif" style="padding:0px;" align="top">
some text.........
</br>
</div>
</body>
</html>
Try using an absolute path:
background: url('/path/from/root/file.gif')
Or:
background: url('http://example.com/path/from/root/file.gif')
This ensures that there is no ambiguity as to where the image is coming from.
First of all i would advise you to apply some sort of clearfix. The easy way would be to add overflow:hidden; to your .ui-highlight. This is required to give the wrapper some height. DDo some searching on clearfix for the how and why.
Second a would check if the image is actually getting loaded, your path might be wrong. Checking it in the code inspector from Chrome would be the way for me.
There's nothing syntactically with your CSS which leads me to believe that the image is not where you specify in your CSS. Try an absolute URL or a path relative to the CSS file itself.
However: I'm not sure you're going to get the results you're looking for with this CSS, though. If you try changing
background: url('./path/file.gif');
to
background: #f00;
you can preview what you're going to get when you get the image url worked out.
Since you say that you're trying to get "a bordered box with image on the left and text on the right of the image" you might try something like this:
CSS:
.ui-highlight {
background: url('http://www.site.com/file.gif') top left no-repeat;
border: 2px solid green;
color: #363636;
padding: 0.7em;
padding-left: 90px; /* This should be the width of the background image */
}
HTML:
<div class="ui-highlight">
some text.........
</div>
That would draw a border around the div, add a background image to the top left of the div, then write the text to the right of that image.