Okay
  Public Ticket #2892196
responsive
Closed

Comments

  • Raquel started the conversation

    Hello, 
    I've built this page with the blocks and it looks a bit off to the right side rather than centered and the text does show up on the mobile, I mean not the complete sentence. 

    Could you please help me?

    Thank you

    Raquel

  •  8,841
    Tahir replied

    Hey Again,

    Try using the New Responsive Typography Settings in here : http://prntscr.com/gnf951 .

    Best.


    ThemeNectar Support Team 

  • Raquel replied

    Hello Tahir,

    Unfortunately  that doesn't work, I still can't see the heading despite chanaging the H1 size on the responsive settings for Iphone.

    Anything else I could do, please?


    Thank you,

    Raquel


  •  8,841
    Tahir replied

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .nectar-split-heading h1 {
        word-break: break-word !important;
    }

    Thanks


    ThemeNectar Support Team 

  • Raquel replied

    Thank you, it woks great. 

    Now how can I make the color rows to interact, I mean have the orange square the the photo next to it, the the blue square then the photo.
    Now's just going orange square photo photo the the blue one.

    https://biopec.co/nosotros/

    Thank you

  • Raquel replied

    Hi again and thank you for your help. In this page https://biopec.co/nosotros/ there are some hotspots on the map that when you click on them the orange fills up the whole page and the text looks small, can I make it more proportionate. 

    I put the CSS to be able to modify the color and text.

    .nectar_image_with_hotspots .nectar_hotspot_wrap .nttip {
        background: #d75532!important;
        color: #1c1c1c!important;
        text-transform: uppercase !important;
        font-weight: 400;
        font-size: 14px;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }


    Thanks

  • Raquel replied

    By the way Tahir, the CSS that you suggested does actually brake the words but not properly. I have chosen "latin in the settings" but doesn't seem to work.  Shouldn't say client es but instead clientes all together, that's not how that word is hyphenated in Spanish 
    https://biopec.co/nosotros 

    .nectar_image_with_hotspots .nectar_hotspot_wrap .nttip {
        background: #d75532!important;
        color: #1c1c1c!important;
        text-transform: uppercase !important;
        font-weight: 400;
        font-size: 14px;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

  •  8,841
    Tahir replied

    Hey Again,

    1. I see you switched to the Nectar Highlighted Text instead of Split Line.

    2. Use the column Direction feature to adjust the Color blocks and images: http://themenectar.com/docs/salient/page-builder-row/#column-direction .

    3.Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    @media only screen and (max-width: 690px) {
        .nectar_image_with_hotspots .nectar_hotspot_wrap .nttip.open .inner {
            font-size:18px;
            line-height: 21px;
        }
    }

    Thanks


    ThemeNectar Support Team 

  • Raquel replied

    Thank you for all your help. 

    1. The hotspots don't really work, I liked the way the looked before, it just didn't work on the mobile, but when I do your CSS it changes all the things I'd set before and changes the background to white, the text in small caps grayish...

    It there a way I could keep the settings from before making it ok for the mobile version.

    2. The there a way I could set more space on the archive grid for my products? https://biopec.co/pedidos/

    3. Can I remove "Similar products" from the single product on the mobile only? https://biopec.co/shop/pedidos/alimentador-profesional/

    4. On this page, the text seems crammed in Subtotal, how can I change the settings for this page?
    https://biopec.co/pago/

    Thank uou

    Thank you

  •  8,841
    Tahir replied

    Hey Again,

    1. Could you elaborate a bit more on how we can help you on this?. 

    2. Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .woocommerce .woocommerce-result-count, .woocommerce-page .woocommerce-result-count {
        right: 290px !important;
    }
    @media only screen and (min-width: 1300px) {
        body.woocommerce:not(.single-product) ul.products[data-n-desktop-columns="3"] li.product {
            padding:10px !important;
        }
    }

    3.

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    @media only screen and (max-width: 690px) {
        body.woocommerce.single-product div[data-tab-pos="in_sidebar"] section.related.products {
            display: none !important;
        }
    }

    4. Could you provide a screenshot of the issue as it seems to layout correctly on my end in Chrome?.

    Thanks


    ThemeNectar Support Team 

  •   Raquel replied privately
  •  8,841
    Tahir replied

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    /* turn mobile close hotspot icon black */
    @media only screen and (max-width: 690px) {
        .nectar_image_with_hotspots .nectar_hotspot_wrap .nttip .tipclose {
            border-color: #0e0e0e !important;
        }
        .nectar_image_with_hotspots[data-color="accent-color"] .nttip .tipclose span:before, .nectar_image_with_hotspots[data-color="accent-color"] .nttip .tipclose span:after {
            background-color: #0e0e0e !important;
        }
    }

    Thanks


    ThemeNectar Support Team 

  •  1
    sinisgroup replied

    hello,

    i have used agency demo in salient with the cube effect in the homepage. the problem is that in the mobile it is not responsive and the video does not show nice at all.

    Is there any way to fix it or to hide this effect only in mobile?

  •  8,841
    Tahir replied

    Hey Again,

    I am afraid its not possible to hide it on mobile though you can adjust  the New Responsive Typography Settings in here : http://prntscr.com/gnf951 .

    Best.


    ThemeNectar Support Team 

  •   Raquel replied privately
  • Raquel replied

    Hi again, I also wanted to remove the underline animation when I hover over the name on the FANCY BOXES at the bottom of this page:

    https://biopec.co/apicultura/

  •  8,841
    Tahir replied

    Hey Again,

    Sorry for the late turn around, we can get overwhelmed sometimes by the number of tickets. 

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .nectar-fancy-box[data-style*="text_underline"].content-color-383838 h4, .nectar-fancy-box[data-style*="text_underline"].content-color-383838 h5 {
        background-image: none !important;
    }

    Thanks


    ThemeNectar Support Team 

  •  8,841
    Tahir replied

    Use Loco Translate to translate Woocommerce Plugin and change all those texts.

    For the Button Leading use below CSS.

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .nectar-slide-in-cart.style_slide_in_click .widget_shopping_cart a.button.checkout {
        line-height: 1.3em;
    }

    Thanks


    ThemeNectar Support Team