Home Forums Themes Support Gecko Edit elements only for mobile

Viewing 23 reply threads
  • Author
    Posts
    • #2438

      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!

    • #2439

      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 ago by Harry.

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

    • #2465

      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?

    • #2466

      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

    • #2487

      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

    • #2489

      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

    • #2490

      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?

    • #2496

      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

    • #2497

      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

    • #2498

      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

    • #2499

      Hi,

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

    • #2500

      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

    • #2501

      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

    • #2502

      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

    • #2504

      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

    • #2505

      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

    • #2516

      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!

    • #2521

      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

    • #2526

      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!

    • #2530

      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 ago by Harry.

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

    • #2532

      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

    • #2535

      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!

    • #2536

      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

    • #2543

      Thank you Harry, cheers!

Viewing 23 reply threads

You must be logged in to reply to this topic.