Edit elements only for mobile

[knoto]

Hello,

How can I edit the following elements for mobile version only?

 

 

For example in this case, how can I set the scale of the image and size of the text only for mobile?

 

 

 

 

 

 

 

 

 

 

 

And here, where can I edit the css to control the text and image scale?

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Thanks!

[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 7 years, 8 months ago by Harry.

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

[knoto]

Hello,

1. and 2. What am I controlling with this?

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

I mean, if I use cover instead of that row, how can I have this on the page title?

This is a Meta Slider in mobile, how can I fix the proportions and text?

3. Great, how can I get the same result for the other gallery? http://misa-shoes.com/es/ready-to-wear/

4. How can I fix this header issue in mobile?

[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

[knoto]

1. and 2. Sorry, but I don’t see any difference yet…

 

3. How can I add padding for caption inside a meta slider? in order to correctly read the caption…

4. How can I edit / remove these social media sharing buttons on product page?

 

Thanks

[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

[knoto]

Thank you Harry

1, 2. I’m sorry but I still not see any difference.

1.For the text in the home image it’s like exactly what we’ve done here (.metaslider .flexslider .caption-wrap .caption { white-space: normal; padding: 0 30px; })  but for media only inside a text block.

2. I guess that the scale in mobile is wrong because I have it with a height of 400 px, thus it stretches the meta slider so it fits the mobile screen, am I wrong?

[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

[knoto]

Hello Harry, thank you for your response…

2. Sorry but I’m checking right now on my phone and I still don’t see a change…

And one last thing… How can I add a frontend button to change language? there is a widget in the widget section but how I display it? I want to put it in the top-right corner of the header…

Thank you

[Harry]

Hi,

1. I checked your site on my phone and saw the image scale correct but your text so long so it go out the image

2. I copy short code from http://misa-shoes.com/wp-admin/admin.php?page=custom_widget_area and insert to Header Right Content in JanStudio > Theme Option > Header > Header Right Content.

Now you can setting up style for language switcher.

Best regards

 

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

[knoto]

Hi,

Is it possible just to have the 2 flags in the top-right corner without creating that gray space?

[Harry]

Hi,

You can use child theme with attach file.

1. You create folder “views & header” in gecko-child with path gecko-child > views > header

2. Copy attached file “layout-2” to gecko-child > views > header

3. Add below code to gecko-child > functions.php

if ( ! function_exists( 'jas_gecko_child_register_sidebars' ) ) {
function jas_gecko_child_register_sidebars() {
register_sidebar(
array(
'name' => esc_html__( 'Language Sidebar', 'gecko' ),
'id' => 'language-sidebar',
'description' => esc_html__( 'The Language Sidebar', 'gecko' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h4 class="widget-title tu">',
'after_title' => '</h4>',
)
);
}
}
add_action( 'widgets_init', 'jas_gecko_child_register_sidebars' );

4. Go to Appearace > Widgets > add Language Widget to Language Sidebar

Best regards

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

[knoto]

Hi Harry,

Do I have to create the child theme first, or does it exist already? If so, how do I access that path? I don’t see any attached file…

Thx

[Harry]

Hi,
Child theme included in package you download from ThemeForest. So you can use this

Attachments:

You must be logged in to view attached files.

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

[knoto]

Hello Harry, I can’t find the directory path of the gecko-child in the folders, i am using a FTP server to access the host, can you help me find it?

Thanks

[Harry]

Hi,
1. You download file at https://themeforest.net/downloads and extract .zip file you will see gecko-child
2. Create folder “views” in gecko-child, create folder “header” in “views”
3. Download attached file in this topic and extract
4. Put the file in gecko-child > views > header
5. Open file functions.php in gecko-child with text editor and copy below code to latest line of file

if ( ! function_exists( 'jas_gecko_child_register_sidebars' ) ) {
function jas_gecko_child_register_sidebars() {
register_sidebar(
array(
'name' => esc_html__( 'Language Sidebar', 'gecko' ),
'id' => 'language-sidebar',
'description' => esc_html__( 'The Language Sidebar', 'gecko' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h4 class="widget-title tu">',
'after_title' => '</h4>',
)
);
}
}
add_action( 'widgets_init', 'jas_gecko_child_register_sidebars' );

6. Compress gecko-child to gecko-child.zip
7. Go to Appearance > Theme > Add new > Browser to gecko-child.zip and install and activate Child theme.

Best regards

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

[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]

Hi,

1. The error message will disappear after you update parent theme.

2. All of your custom code do in theme option and child theme so can you update parent theme normal without losing anything, i helped you update theme to latest version. and display cart icon, language switcher now have issue with widget on footer after activate child theme there is text “English” can you try config in qTranslate plugin

3. The code should be

 

@media only screen and (max-width: 768px) {
.vc_custom_1487705315336  h3 span {
font-size: 20px !important;
}
}

@media only screen and (max-width: 320px) {
.vc_custom_1487705315336 h3 span{
font-size: 10px !important;
}
}

4. Yes, you can use these code

 

Best regards

 

 

 

 

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

[knoto]

Hi Harry

1, 2. Thank you, Now I only want to disappear that gray bar at the top with the “search” and “my account” buttons. And to increase the sizes of the language changing flags on mobile, they are too little.

3. I don’t see any difference in the text, I want it to appear more “compact” when it comes to small screens, do you know what I mean?

For example if I drag my window the text maintains its scale…

…Ideally it should change according to the screen width, it’s that possible?

These are the last issues (I hope haha) thank you for your time!

[Harry]

Hi,

1,2. I helped you do this

3. You should change to

 

@media only screen and (max-width: 768px) {
.vc_custom_1487705315336  h3 span {
font-size: 20px !important;
}
}

@media only screen and (max-width: 736px) {
.vc_custom_1487705315336 h3 span {
font-size: 18px !important;
}
}

@media only screen and (max-width: 480px) {
.vc_custom_1487705315336 h3 span {
font-size: 15px !important;
}
}

@media only screen and (max-width: 320px) {
.vc_custom_1487705315336 h3 span{
font-size: 10px !important;
}
}

 

Best regards

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

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

[Harry]

We really appreciate if you take a time to help us rate for our theme 5 stars at https://themeforest.net/downloads

Thank you very much!

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

[knoto]

Yeah sure, I just did it.

Last things Harry…

1. I still see the dark gray bar at the top

2. It seems that there is one link that doesn’t work in mobile version only, i’m talking about this particular product

On both galleries…

http://misa-shoes.com/mto/

http://misa-shoes.com/rtw/

 

 

 

 

 

 

 

Any idea why’s that?

3. How can I change the color of the closing button of the popup?

Thanks!

[Harry]

Hi,

Thank you for your rate!

1. I helped you remove gray bar

2. I checked and saw still have padding on this section

https://monosnap.com/file/IYD9GSFXoUR2eXnHPnb34yly268DHp#

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

.ypop-modal .ypop-wrapper a.close { background-color: rgba(255, 255, 255, 0.8); background-image: none; }

.ypop-modal .ypop-wrapper a.close::after { color: #3e3e3e; content: “‘\e680”; font-family: “Pe-icon-7-stroke”; font-size: 30px; line-height: 30px; position: absolute; right: -2px; top: 0; }

And change #3e3e3e with your color.

Best regards

 

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

[knoto]

Thank you Harry, cheers!

[Author]

Posts