when I go to different views like 1024 X 768 then hover is acting as click. Buts its working fine in normal laptop size window.
when I hover over link it changes color to blue, but in small size screen it doesn't change color on hover, it change color on click
Below is HTML code
<div class="account-wrapper">
<ul>
<li>{{...}}
<span class="helpIcon icon-interface-question-mark" (click)="toggleHsaInfo()">
</span>
</li>
</ul>
<div>
Below is scss code
.account-wrapper {
border-bottom: 1px solid $border-color;
.icon-interface-question-mark {
position: relative;
cursor: pointer;
&:hover {
color:blue;
}
}
I tried to solve like this
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
{
.account-wrapper{
.icon-interface-question-mark{
&:hover {
color: blue;
}
}
}
}
I believe your question is related to mobile devices without the ability to hover. You can accomplish this in various ways but I prefer CSS media queries.
.account-wrapper {
border-bottom: 1px solid green;
.icon-interface-question-mark {
position: relative;
cursor: pointer;
}
}
#media (hover: hover) {
.helpIcon:hover { color: blue; }
}
#media(hover:none){
*:hover { color: inherit !important; }
*:active {color: blue !important;}
}
You can also try #media(hover:on-demand)
Example: https://stackblitz.com/edit/angular-ou67ut?file=src%2Fapp%2Fapp.component.scss
Related
I am trying to change the color of the text in my header right widget when I scroll down the page. I want the text to change from white to orange when I scroll down.
Here is the CSS I tried adding:
#media only screen and (min-width: 800px) {
.header-scroll .site-header {
color: #FF6600 !important;
}
}
.header-right {
color: #fff;
}
!important; is not overriding the white color I assigned to the header right text.
Here is my website: https://asdeathdouspart.com/
Any ideas or help? Thank you!
I think you are targeting the parent, not the child, try this:
.header-right {
color: #FF6600 !important; }
You have an error in your media query. You close the brace too early
#media only screen and (min-width: 800px) {
.header-scroll .site-header {
color: #FF6600 !important;
}
.header-right {
color: #fff;
}
}
I have removed some elements from a wordpress theme/template, however they have not worked fully
Issue 1: Header on page still contains gray
https://www.bodyclocktherapies.co.uk/?post_type=product
Issue 2: Background image remains on mobile devices and not on desktop
https://www.bodyclocktherapies.co.uk/?post_type=product
Image: https://ibb.co/QdPc7V4
Tried some css code, but has not worked
Issue 1
#cms-theme.woocommerce.archive #cshero-header.header-1 {
background-color: #ffffff;
}
#cshero-header-navigation.col-xs-12.col-sm-12.col-md-12.col-lg-12 {
background-color: #ffffff;
}
a:hover {
background-color: #ffffff;
}
Issue 2
#cms-theme.woocommerce.archive #cms-content {
background-color: #ffffff;
}
#cms-theme.woocommerce.single-product #cms-content {
background-color: #ffffff;
}
#main.site-main {
background-color: #ffffff;
}
I should have a complete white header and clear bacground on all devices
You can simply right click and used inspect element for this.
For First issue used this css:
#cms-theme.woocommerce.archive #cshero-header.header-1 > .container,
#cms-theme.woocommerce-page.archive #cshero-header.header-1 > .container {
background-color: #fff;
}
#cms-theme.woocommerce.archive #cshero-header.header-1,
#cms-theme.woocommerce-page.archive #cshero-header.header-1 {
background-color: #fff;
}
#media (min-width: 993px){
#cshero-header.header-1:before {
background-color: #fff !important;
}
}
For Second issue:
Background image come in after selector so that you need to hide that in mobile using media query
#media (max-width: 767px){
#cms-theme.woocommerce #page:after,
#cms-theme.woocommerce-page #page:after {
display: none
}
}
I have some styles inside a class which can be used standalone, but I would also like to apply these styles to another class when a media query condition is met. Below is an example.
I have two classes: light and dark.
.light {
border: 1px solid;
background-color: white;
}
.dark {
border: 1px solid black;
background-color: black;
color: white;
}
<h2>light</h2>
<div class="light">foo</div>
<h2>dark</h2>
<div class="dark">foo</div>
Now I want to compose these class names to create a new version: light on mobile (i.e. narrow screens), dark on desktop (i.e. wide screens).
The only way I'm aware of doing this is by duplicating my styles:
#media (max-width: 499px) {
.lightOnMobileAndDarkOnDesktop {
border: 1px solid;
background-color: white;
}
}
#media (min-width: 500px) {
.lightOnMobileAndDarkOnDesktop {
border: 1px solid black;
background-color: black;
color: white;
}
}
<h2>light on mobile, dark on desktop</h2>
<div class="lightOnMobileAndDarkOnDesktop">foo</div>
However I would like to achieve this without duplicating the styles for my classes, and without JavaScript.
Here is some pseudo code which illustrates what I would like to achieve:
#media (max-width: 499px) {
.lightOnMobileAndDarkOnDesktop {
#extend .light;
}
}
#media (min-width: 500px) {
.lightOnMobileAndDarkOnDesktop {
#extend .dark;
}
}
If there isn't any way to achieve something to this effect today, my next question would be: are there any proposals for CSS that would allow me to achieve this in the future?
I have created a button on my website menu and want to give it its own individual active link color, how would I go about doing this? In an ideal world, the button would be pink (#ed6d8d) and the active text color would be white. At current the default active menu item color is blue (#00bcd1) so would clash horribly with the pink - any advice would be much appreciated!
I used the following CSS code to create the button:
#in-crisis li a:hover {opacity: 1!important;
color: #ffffff;}
.in-crisis a {
border: 2px solid #dbf7ff!important;
padding: 12px!important;
margin: 10px 12px 12px 12px;
border-radius: 12px;
text-align: center;
background-color: #dbf7ff;
}
.in-crisis a:hover {
background-color: #fff;
color: #00bcd1!important;
border: 2px solid #00bcd1 !important;
}
.et_header_style_left #et-top-navigation {
padding-top: 16px!important;
}
.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 6px!important;
}
#main-header.et-fixed-header .in-crisis a {
color: #00bcd1 !important;
}
#media only screen and (max-width: 980px) {
.in-crisis a {
background-color: #dbf7ff;
}
}
#media only screen and (min-width: 980px) {
#et_top_search {
margin-top: 25px !important; }
}
Many thanks in advance.
I dont know if you are talking about hover or active but for active css you should use
.in-crisis a:active {
color: white;
//or anything else here
}
I am creating a website using Bootstrap and want to resize the Navbar height when the browser screen is min-width: 268, I am using a media query to do this but for some reason the media query changes the height of the Navbar before the screen has been made smaller, can someone please help, code is below.
.navbar-inverse {
background-color: #fff;
border-color: transparent;
height: 105px;
}
#media only screen and (min-width: 268px) {
.navbar-inverse {
background-color: #fff;
border-color: transparent;
height: 50px;
}
}
If you want this style to apply when the width is LESS than 286px, use max-width. Try this:
#media only screen and (max-width: 268px) {
.navbar-inverse {
background-color: #fff;
border-color: transparent;
height: 50px;
}
}