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
}
}
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;
}
}
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
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;
}
}
So suppose I have the following code:
td.topnav_link {
padding: 5px 5px 5px 5px;
background-color: #5babd7;
border: 1px solid #578baf;
cursor: default;
}
#media screen and (max-width: 500px) {
#id_topnav_link_menu.topnav_link {
display: block;
}
#id_topnav_link_about.topnav_link {
display: hidden;
}
#id_topnav_link_contact.topnav_link {
display: hidden;
}
}
and
<td class="topnav_link" id="id_topnav_link_contact">
contact
</td>
should the "about" and "contact" not become hidden when I resize the browser down? (It does not for me when testing in a variety of browsers)
(Note: Yes, I realize I am using a td where I should not, but I am slowly converting an old layout of mine to be more CSS and more mobile)
There's no hidden value for display. It should be none. But as it is a cell, you should use visibility, which will hide the cell, but the space will still remain there:
#media screen and (max-width: 500px) {
#id_topnav_link_menu.topnav_link {
display: block;
}
#id_topnav_link_about.topnav_link {
visbility: hidden
}
#id_topnav_link_contact.topnav_link {
visbility: hidden
}
}
Here's a list of possible values: https://developer.mozilla.org/en-US/docs/Web/CSS/display
Situation
I recently decided to put comments in my CSS files. And once I did so, one of them stopped working.
Both ways of making comments make my entire CSS file not to work. I know this is lacking informations, I just don't know where it could even possibly come from.
In case it does matter, this is how I write my CSS:
// Background
body { background-color: #666666; }
#content { background-color: #cccccc; }
#menu { background-color: #cccccc; }
#menu-footer { background-color: #33cccc; }
#menu-items a.active { background-color: #33cccc; }
#menu-items a:hover { background-color: #99cccc; }
// The white spaces are actually tabs (Alt+i on Emacs)
Update 1
I am looking for ways to debug this situation. I see my CSS files in the developer tool from Google Chrome, but properties are not applied.
foobar {
// color: cyan;
}
Does this simply make the CSS wrong but only on the one line ? So the rest of the file keep getting parsed ?
Update 2
I always used // to comment my CSS but with the later notation I used in this post. Now that I changed my mind and am using inline CSS, // being an invalid token make the whole file not readable.
css does not recognize the double slash as a comment. You have to use the
/* */ one.
I might be wrong, but since the double slash is not a valid css token the behaviour might be browser dependent. I would expect browsers to simply ignore the property or the statement that follows the //, but I never checked/tested.
There are rules on what browsers should do in various situations, however I did not see any for unknown token (maybe a I didn't look well enough).
Use */ Text */ , instead of // (// is comment in javascript)
/* Comment */
For Example
/**** Background ****/
body { background-color: #666666; }
#content { background-color: #cccccc; }
#menu { background-color: #cccccc; }
#menu-footer { background-color: #33cccc; }
#menu-items a.active { background-color: #33cccc; }
#menu-items a:hover { background-color: #99cccc; }
/* The white spaces are actually tabs (Alt+i on Emacs) */
Try the comments this way
/* Background */
body { background-color: #666666; }
#content { background-color: #cccccc; }
#menu { background-color: #cccccc; }
#menu-footer { background-color: #33cccc; }
#menu-items a.active { background-color: #33cccc; }
#menu-items a:hover { background-color: #99cccc; }
/* The white spaces are actually tabs (Alt+i on Emacs) */
The only way to comment in CSS is by /* this is a comnent */
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}