Search Results for 'css'

[ateacme]

Hi, I’ve noticed that on mobile devices whit “dark mood” settings for display, our website labartdog.com lost their basic colors, even header so the logo – brown and light-blue on transparent background – was only barely visible.

I’ve temporary changed the png logo with a jpg but still menu icons on the left is not visible…

 

is there a way to have more control on colors on mobile devices with that specific kind of settings?

Maybe I skipped some theme options? Or I can fix it with a little custom css code?

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Cair,

Please add below code to JanStudio > Theme Option > General layout > Custom CSS

body {
color: #333 !important;
}

And change #333 to your color

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Harry]

Hi,

Please add to JanStudio > Theme Option > General Layout > Custom CSS

 

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Harry]

Hi Ak,

Please add below code to Claue > Theme Option > General Layout > Custom CSS

.single-product header, .single-product footer, .single-product .jas-breadcrumb {display: none;}

If you want apply this for only mobile please change code to

@media only screen and (max-width: 767px) {

.single-product header, .single-product footer, .single-product .jas-breadcrumb {display: none;}

}

Kind regards

 

 

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Harry]

Hi,

You can change color hover by add below code to Claue > Theme Option > General Layout > Custom CSS

 

.product-image a.db::before {
background: rgba(0, 0, 0, 0.1);
}

and change 0,0,0 to RGB color and 0.1 as opacity of color from 0.0 to 1.0

 

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Harry]

Hi,

Please add below code to Claue > Theme Option > General Layout > Custom CSS

@media only screen and (max-width: 735px) {

.products .jas-col-xs-6:nth-child(2n), .products.jas-masonry .jas-col-xs-6:first-child, .products.jas-masonry .jas-col-xs-6:nth-child(2n+1), .products .jas-col-xs-6:first-child, .products .jas-col-xs-6:nth-child(2n+1), .products.jas-masonry .jas-col-xs-6:nth-child(2n) {
padding-right: 0.5rem;
padding-left: 0.5rem;
max-width: 100%;
flex-basis: 100%;
}

Kind regards

 

 

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Harry]

Hi Dubsbhoy,

Please add below code to Claue > Theme Option > General Layout > Custom CSS

@media only screen and (max-width: 1024px) {
.btn-quickview::after {display: none;}
.btn-quickview {
text-indent: inherit;
background: #fff;
border: inherit;
padding: inherit;
}
.product-image .product-btn .button {
display: block;
}
.product-btn {
left: 50%;
transform: translate3d(-50%, -50%, 0);
top: 50%;
}}

Kind regards

• This reply was modified 1 year, 9 months ago by Harry.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[gio153]

Thanks Harry for that feedback! Love the theme so far, well done.

1. Your code works, thanks!
2. The mega-menu CSS class does center the mega menu which is helpful in making sure items do not fall of the right side of the screen. It does however not solve the issue with items falling of the bottom of the screen. Is there a way to structure a long list into, say, 4 columns? Without resorting to adding sub items such as A-F, G-L, M-P, Q-Z for instance.
   I have Googled a CSS class code like “mega-menu hide headings col-4” could work but that is inside another theme and does not function as such in Claue.

[Harry]

Hi,

Thank you for choose our theme.

1. Please add below code to Claue > Theme Option > General Layout > Custom CSS

@media only screen and (max-width: 767px) {
.menu-nieuw-header-container {
min-width: 1150px;
width: auto;
text-align: left;
}}

2. Please go to Menus > Edit Main menu and add class “mega-menu” to parent menu item https://tppr.me/KWysu

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Harry]

I see you added to custom JS please remove code in customJS and add to custom CSS

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio