Search Results for 'css'

[knoto]

Hi Harry,

1.I followed your instructions to the letter and at the end, when I activate the Gecko child, the following message appears…

I also want to insert the cart / bag button just by the changing language flags.

Ideally the header will look like this… in the red box the cart button and in the blue one the changing language feature.

2. When I try to update the theme, it says that “Updating this theme will lose any customizations you have made. ‘Cancel’ to stop, ‘OK’ to update.”

Does it means that if I update it I will basically have a raw template again?

 

3. I want to use Media Queries for different device widths, in order to control the size and spacing of the text when it comes to smaller screens…

e.g.

I think it’s something like this…

[code]

@media only screen and (max-width: 768px) {
b {
font-size: 20px;
}
}

@media only screen and (max-width: 320px) {
b {
font-size: 10px;
}
}

[/code]

4. And in addition to this, I want to set the same rule for this meta slider

I tried to fix it with the css that you gave me…

[code]

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

.metaslider .slides img {
height: 120px;
}

}

[/code]

Changing the height value, is there a better way to do it?

So the height of the meta slider changes depending of the width of the screen…

 

Thanks in advance!

[Harry]

You can add custom CSS code in JanStudio > Theme Option > General Layout > Custom CSS

1. Change mini -cart

.jas-push-menu h3 { background: #000; color: #fff; }

Change #000 and #fff with your colors

2. Hot & New badge

.badge span { background: #f68e56; }

.badge .new { background: #4eb0be; }

Change #f68e56 and #4eb0be with your color

3. Page title background

.page-head:before { background: rgba(0, 0, 0, 0.4) ; }

Change 0,0,0 with your as R,G, B color and 0.4 as opacity from 0 to 1.

Best regards

 

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

[Harry]

Hi,

1. I corrected code on your site, and now you can check

@media only screen and (max-width: 736px) {
.pa-center h1 span {font-size: 36px !important;}
.pa-center h6 span {font-size: 14px !important; letter-spacing: 1px;}

.metaslider .flexslider .caption-wrap h3 { white-space: normal; line-height: 1.3; font-size: 14px;}
}

2. You can add custom css

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

.metaslider .slides img {
height: auto;
}

}

Best regards

 

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

[Harry]

Hello Knoto,

1,2. You can add custom CSS code

@media only screen and (max-width: 736px) {
.pa-center h1 span {font-size: 36px;}
.pa-center h6 span {font-size: 14px; letter-spacing: 1px;}.metaslider .flexslider .caption-wrap h3 { white-space: normal; line-height: 1.3; font-size: 14px;}
}

3. Custom CSS code

.metaslider .flexslider .caption-wrap .caption { white-space: normal; padding: 0 30px; }

4. You can remove social icon by add custom css

.social-share .jas-social a.facebook,

.social-share .jas-social a.twitter,

.social-share .jas-social a.google-plus,

.social-share .jas-social a.pinterest,

.social-share .jas-social a.tumblr{

display: none;

}

If you want keep any social icon you can remove code.

Best regards

 

 

 

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

[Harry]

1.For the issue with responsive text you should heading tag h3, h4 like our demo
2. For issue with meta slider you can add custom css

@media only screen and (max-width: 736px) {
.metaslider .flexslider .caption-wrap h3 { white-space: normal; line-height: 1.3;} 
}

3.I saw you add padding for section so on mobile it view not good. https://monosnap.com/file/90DqESQYMudQZ6kTqwmiYhgtd1R58N#
4. You can add custom css in JanStudio > Theme Option > General Layout > Custom CSS

@media only screen and (max-width: 736px) {
.header-sticky .header__mid { top: 0 !important;}
}

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

[tplusm]

Thanks that worked. On the same note, I’ve been trying to override the main-menu on hover color but nothing seems to be working. Can you tell me what CSS class i need to override for the main menu on hover color?

[vifalanghe]

Hi there,

I’m good, thanks! Thanks for your support.

Please, find the answers below:

1. You want to change text color, background color or anything else?

I need to change text color, background & the black bar too. 

2. To translate, you can use Loco Translate or WPML plugin

3. Please use this custom CSS code http://pastebin.com/NK4yhNSM

4. Please use this custom CSS code .result-count-order.bgd { background: red; }

In this code where can I put the RGB color?

That’s perfect, I’ll try all !! Thank you!

Best regards!

[Foster]

Hi,

To hide it, please use this custom CSS code

#jas-backtop { display: none !important; }

You can change to your icons via custom CSS code

Best regards!

[Foster]

Hi there,

Not bad, how about you?

1. You want to change text color, background color or anything else?

2. To translate, you can use Loco Translate or WPML plugin

3. Please use this custom CSS code http://pastebin.com/NK4yhNSM

4. Please use this custom CSS code .result-count-order.bgd { background: red; }

 

Best regards!

[Harry]

Hi,

You can add custom CSS in JanStudio > Theme Option > General Layout > Custom CSS
1. For the text

@media only screen and (max-width: 640px) {
.pa-center h1 span {font-size: 36px;}
.pa-center h6 span {font-size: 14px; letter-spacing: 1px;}
}

2. The image background you should set cover so it will cover your content. Now you’re the best solution for image background

3. You can add custom css in JanStudio > Theme Option > General Layout > Custom CSS

@media only screen and (max-width: 736px) {
 .women-collection h3.right {
  left: 0;
  position: inherit;
  right: 0;
  text-align: center !important;
  top: 0;
  transform: none;
}
.men-collection h3.left {
  left: 0;
  position: inherit;
  right: auto;
  top: 0;
  transform: none;
}
.women-collection h3.right::before, .men-collection h3.left::before { display: none;}
}

Best regards

• This reply was modified 8 years, 9 months ago by Harry.

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