I have a problem with background of an element in my website. On PC browser, this element is looking that:
but on mobile phone, this element is looking that:
Why this icon "X" can't be display on mobile phones? Here is my CSS code:
.select2-search-choice-close {
display: block;
position: absolute;
right: 3px;
top: 4px;
width: 12px;
height: 13px;
font-size: 1px;
background-repeat: no-repeat;
background-image: url('http://mysite.pl/templates/default/panel/img/select2.png');
background-position: right top;
outline: none;
}
Can anyone help me? Thanks.
EDIT:
The problem is with this layout: https://wrappixel.com/demos/free-admin-templates/maruti-admin/form-common.html
On mobile there is another style overriding the background image as you can see in this screenshot :
As you can see it's on the line 475 of your file, so simply edit/remove it.
Related
background image in span element is overlapping another element background image
background-color: inherit;
backface-visibility: hidden;
i already give these two properties for prevent issue. but sometimes issues came in my web page.
.iconImage {
background-image: url(images/svg/S_TL_CATALOG.svg);
margin-left: -18px;
width: 36px;
height: 36px;
width: 36px;
margin: auto;
display: inline-block;
cursor: pointer;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: relative;
left: 50%;
background-color: inherit;
backface-visibility: hidden;
}
help me to solve this issue.thanks
<div> // listed images for tools icon
<span></span> //background image1 .. this is static image
<span></span> //background image2 .. coming images are dynamically adding images by drag and drop
---------
</div>
this is my html format.
after refresh my webpage background image2 loading first then background image1 loading next image2 is overlapping the image1.
mouseover on the two images at that time also overlapping. anything css properties is there for solve this
First of all, it would help if u post a more detailed code.
Maybe it’s a display problem..
Try to change the display value:
display: block;
If u want to display the span block ements next to each other, add
float: left;
background-blend-mode: screen;
backface-visibility: hidden;
give this css property to element
I am adapting an open source project, our fork is a little different than and I need to switch around some of the hard-coded graphics and wording.
At the top of the footer file (writen in haml) there is this
.footer
.footer-top
%p.by-line Brought to you by #{#city.brought_by}, in partnership with the people of #{#city.name}. #{#city.agency_url}
And in the corresponding html file there is this:
.by-line:before {
font-family: 'collier72-icons';
font-size: 2.7rem;
content: 'y';
color: $mid-grey;
position: absolute;
left: -6.5rem;
bottom: 0.1rem;
-webkit-font-smoothing: antialiased;
}
The result ends up looking like this:
Looks great, right? ...but I want to change it to look like this mockup I created:
So, I need to change the layout but I don't know how to change the haml file. If it were html I'd add a div with a background image.. or even just an inline image ...but I've fallen in haml land and I can't get up.
Change the content property and adjust from there.
.by-line:before {
font-family: 'collier72-icons';
font-size: 2.7rem;
content: url("path/to/file.png");
color: $mid-grey;
position: absolute;
left: -6.5rem;
bottom: 0.1rem;
-webkit-font-smoothing: antialiased;
}
If you are looking to make the image responsive, you can use a background image & set the background to be responsive.
Fiddle: https://jsfiddle.net/pohuski/x0d4v80y/1/
.by-line:before {
content:'';
display: block;
width: 100%; /* width of image */
max-width: 300px; /* width of image */
height: 150px; /* height of image */
background: url(path/to/image.png) no-repeat fixed center; /* image path */
position: absolute;
left: -6.5rem;
bottom: 0.1rem;
}
I have a Twitter Bootstrap based Website with some strange issues on regular old link buttons (like this: http://jsfiddle.net/RK3RC/)
HTML
<a class="button" href="http://jsfiddle.net/">Click Me</a>
CSS
.button {
background-color: #bc4b4e;
color: #ffffff;
display: block;
border-radius: 45px;
border: none;
text-decoration: none;
position: absolute;
font-size: 18px;
padding: 14px 50px;
margin: 0px;
border-width: 0px;
line-height: 20px;
white-space: nowrap;
min-width: 0px;
min-height: 0px;
-webkit-transform: rotate(0deg);
opacity: 1;
left: 220px;
top: 20px;
visibility: visible;
}
.button:hover {
background: #d35559;
}
The buttons work absolutely fine and as expected in desktop browsers, but are not responsive in mobile browsers (touch devices). If you click them through touch, nothing happens - the buttons are non-responsive. However, interestingly, if the link is to an anchor tag on the same page, it will work (just not to an outside page).
Any thoughts/suggestions? I've scoured the Web but haven't found people with the exact same issue, which is a bit odd in itself.
Ok, got it figured out.
It was actually because there was a JQuery-based slider, on a different part of the page, that had a touchenabled setting (which allows the user to go through the slider by swiping). This was affecting the button's response to touch. Once that touch setting was turned off, the buttons everywhere respond as normal.
Thanks for all the help and suggestions. You guys rock.
I am in the process of designing a web page and I'm using the following CSS to create the page header with the main header image centered in a 1000px width page, and for a repeating edge image going across the top of the body and underneath the header to spread across the whole browser page width.
body {
font-family: Tahoma;
background-color: #0184AE;
background-image: url('/images/headeredge.jpg');
background-repeat: repeat-x;
background-position: top;
margin: 0;
position: relative;
}
.whole-page {
width: 1000px;
margin: auto;
padding: 0;
text-align: left;
position: relative;
border-radius: 0 0 15px 15px;
}
.header {
width: 100%;
height: 120px;
color: white;
background-image: url('/images/header.jpg');
background-repeat: no-repeat;
font-size: 10pt;
margin-top: 0px;
margin-bottom: 0;
padding-top: 10px;
border: 1px black none;
position: relative;
}
The CSS above works, except when a toolbar appears. I'm using Chrome with a SEO toolbar and it displaces the centered header image correctly, it pushes it down underneath the toolbar so I can see the whole image.
However, the repeated body image is not displaced at all and the toolbar covers the top so many pixels. This puts the whole thing out of whack.
I've tried a few options in the CSS, but so far nothing seems to work. I'm guessing here, but I think the toolbar draws itself using CSS that 'exists' under the body tag.
Can anyone suggest anything, I'd like either the whole header pushed down, or not. Just so it's consistent.
Using the Chrome developer tools (hit f12) you can inspect (click the magnifying glass icon on the bottom) the toolbar element. Doing this you can see that it is indeed inserted to the body of document. This will unfortunately result in the actual behavior you are seeing. In other words, this is not your fault but the fault of the toolbar developers.
One (ugly) work around is to throw an additional div around your content and apply the background to that.
E.G.
HTML
<body>
<div id="notBody">
<!--Rest of your headers, content, etc here -->
</div>
</body>
CSS
body {
font-family: Tahoma;
background-color: #0184AE;
margin: 0;
position: relative;
}
#notBody {
background-image: url('/images/headeredge.jpg');
background-repeat: repeat-x;
background-position: top;
}
in your header class change to position: absolute; and use top to set how many pixels you want your header to be from the top of the page.
.header {
position: absolute;
/* all your other styles */
top: 200px;
}
I am using fancybox to allow users to send messages to one another. I have a wierd issue where the fancybox's close button shows four times in google chrome but works just fine in firefox.
Here is the css for the button
#fancybox-close {
position: absolute;
top: -15px;
right: -15px;
width: 30px;
height: 30px;
background: transparent url('fancybox.png') -40px 0px;
cursor: pointer;
z-index: 1103;
display: none;
}
Hmmn.. Seeing example page would help.
This shouldnt happen... but im going to throw in a guess that overflow: hidden; could help.
try adding:
background-repeat: no-repeat;
you might want to mess about with the width and height etc too