Okay
  Public Ticket #231434
Website issues (white space in mobile etc...)
Closed

Comments

  • Elizabeth started the conversation

    Hi Guys,

    I'm having a few issues with my salient website. 

    1. When viewing on an iPhone, there is an extra white space being added in below the header but above the nectar slider.

    2. Is it possible to change the font size on the nectar slider? (it seems to Max out at a fairly small size even when I change the setting in 'typography')

    3. When viewing in chrome, there was a MASSIVE jitter when scrolling through some of the parallax sections. I turned off smooth scrolling and this has fixed the issue in chrome, but now smooth scrolling is not working (obviously), is there another fix for this?

    4. Do you have a recommended image size (dimensions) to use for the 3 images that are currently being used as the full width section parallax background images (the sky/leaves, the string, the flowers/chair). The page is too large at the moment and taking too long to load so I'm trying to speed things up. I have a feeling that the images I have used here are too high a resolution, and also possibly too tall for the actual display height of the section being used. Can you please recommend a new image dimension to use for these 3 backgrounds with this in mind?

    5. I like the look of the 'buttons' so have used these as simply a visual feature on the above-mentioned sections (under the large words 'flowers' 'styling' etc...). For the time being I don't want to actually link anything to these buttons, is there a way to temporarily remove the 'hyperlink on hover' function form the buttons using CSS?

    6. When viewing on an iPhone the full width sections with the pictures as backgrounds are resized and their header text and the corresponding pseudo-button beneath is become quite hard to see as they are repositioned over a different part of the background image that clashes with the font colour being used. Is there a way to add a semitransparent background behind this text and pseudo-button to improve the visibility in mobile mode? Could this perhaps be dome through some CSS?

    Wow, that was a lot! I think that's it for now.

    Thanks in advance for your help, I simply love your theme!

    Kind regards,

    Liz

  •  998
    ThemeNectar replied

    Hey Liz!

    1. Make sure you don't have any header colors for the BG of text set in your page header settings box - if you don't, please allow me to log in to check on this for you.

    2. You should be able to set it up to 100px as the demo shows - it currently looks like you don't have any text in yours so I can't see to assist. Can you kindly add some back in?

    3. A new option for smooth scrolling just for Chrome is coming in the next update and yields much higher performance than the current :)

    4. Actually when using the parallax option on rows it's recommended to use images around 800px tall since the entire screen height will be utilized while scrolling past it.

    5. Add this into the Custom CSS box located in your Salient Options panel:

     .col.dark .nectar-button.see-through {
        border: 2px solid rgba(0, 0, 0, 0.75)!important;
        cursor: default;
    }
    .col.light .nectar-button.see-through {
        border: 2px solid rgba(255, 255, 255, 0.75)!important;
    }
    

    6.
     
    @media only screen and (max-width: 1000px) {
      .nectar-button.see-through {
        background-color: rgba(0,0,0,0.5)!important;
        color: #fff!important;
        border: none!important;
      }
    }
    

    Cheers :)


  •   Elizabeth replied privately
  •   Elizabeth replied privately
  •   Elizabeth replied privately
  •   Elizabeth replied privately
  •  998
    ThemeNectar replied

    Hey Liz, sorry about that! Somehow your ticket was out of the normal queue but your last response just got it back in my list.

    1. I just logged in and found a white color being set for the Page Header Background Color & Page Header Font Color on that page - I removed that and now it works as expected :)

    4. Actually 1600px would be fine since you'd want to supply an image that will still appear moderately crisp on larger dispays. A lot of the images I'm using on the live demo for parallax rows are around 1900px.

    5. Change that to this:

    .nectar-button.see-through {
        border: 2px solid rgba(0, 0, 0, 0.75)!important;
        cursor: default!important;
    }
    

    6. Try this instead:

    @media only screen and (max-width: 1000px) {
      .nectar-button.see-through {
        background-color: rgba(255,255,255,0.5)!important;
        color: #000!important;
        border: none!important;
      }
    }
    

    Cheers :)

  •   Elizabeth replied privately
  •  998
    ThemeNectar replied

    Hey again!

    5. Use this instead:

     .nectar-button.see-through[href=""] {
        border: 2px solid rgba(0, 0, 0, 0.75) !important;
        cursor: default !important;
    }
    
    6. Try switching that to:
     
    @media only screen and (max-width: 1000px) {
      html body .nectar-button.see-through {
        background-color: rgba(255,255,255,0.5)!important;
        color: #000!important;
        border: none!important;
      }
    }
    
    Cheers
  •   Elizabeth replied privately