Okay
  Public Ticket #989454
hide the breadcrum for cell phones AND fix a empty space on home
Closed

Comments

  •  2
    Danilo started the conversation

    *Please disregard possible writing errors, English is not my language.

    Can you help me with 2 details of my site?

    1 - I would like to hide the "breadcrumb" in single product pages, but hiding only for smaller resolutions like cell phones, is it possible? What part of the css do I have to change?

    2 - Thinking in ways to optimize and loading faster, I would like to disable the 'Slider Revolution' plugin and display only a still image. What is the best way to add the image in a way that looks similar to the one displayed by GON DEMO? I would like the image to stick together with the horizontal menu, with no space. I tried to insert using elements of the "visual composer" but there is always a space between the element and the menu, how can I remove this space?

    ( Example images attached )

    Seizing the opportunity .. Focusing on the fast loading of the site I have already deactivated the "Wishlist" and "Compare" plugins, in addition to the commented "Slider Revolution". Could you give me more suggestions than could be removed from the code to make it faster? Or parts of the code I could check if this is being useless for my project.

    Thank you, and again, congratulations on the beautiful theme.

    Danilo.

    Attached files:  01_print_colar.jpg
      02_with_space.jpg
      02_without_space.jpg

  •  325
    Stormit replied

    Hi Danilo,

    1. You can add the custom css below

    @media only screen and (max-width: 767px){
        .single-product .breadcrumb-title-wrapper .breadcrumbs{
            display: none !important;
        }
    }
    

    About the space below menu on the home page. There are 2 ways to remove it.

    - You edit the first row in the page editor and set its margin-top to -30px

    - Or you add the custom css below

    body.home #main > .page-container{
        padding-top: 0;
    }
    

    About optimizing website, first you need to optimize all images before uploading. You can use Photoshop to optimize images. This article may help you http://madefreshly.com/blog/howto/how-to-properly-optimize-images-for-web-in-photoshop/. Or you upload an image to this website https://tinypng.com/. It will optimize images for you.

    After you finished building your site, you can install the caching plugin (W3 Total Cache). This article may help you https://skygroup.ticksy.com/article/7374

    For more information about WordPress Optimization, you can read this article https://codex.wordpress.org/WordPress_Optimization

    Best regards,

  •  2
    Danilo replied

    Could you please help me again?

    I would like to hide the "search form" on mobile... So I include the "hidden-phone" in header.php

    But now when I see the home on the mobile appears a larger space below the logo (example attached).

    How can i fix┬┐

    <?php if( $smof_data['ts_enable_search'] ): ?>
    <div class="search-wrapper hidden-phone"><?php ts_get_search_form_by_category(); ?></div>
    <?php endif; ?>

    Attached files:  example.jpg

  •  325
    Stormit replied

    Hi Danilo,

    You add the custom css below

    @media only screen and (max-width: 767px){
        body header.ts-header .logo-wrapper{
            margin: 0 !important;
        }
    }
    

    Best regards,

  •  2
    Danilo replied

    It worked perfect. Thank you!