Okay
  Public Ticket #206491
page headers and color bar?
Closed

Comments

  • Fatima started the conversation

    Hi there, 

    a question regarding the page headers: When i see them on my mobile screen the typography doesnt resize so it all ends up hanging off the page.  is there a way to avoid that or make sure it resizes correctly? 

    also, when i type text into a text box now, it doesnt give me the option to choose a color from the spinning wheel.  Just the standard colors.  Can you suggest why this is happening? thanks so much for all your help!

    Fatima 

  • Fatima replied

    Hi there, 

    do you have an answer regarding the color bar on the text please? 

  •  8,446
    Tahir replied

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

    @media only screen 
    and (max-width : 690px) {
    	
    body #page-header-bg {
        height: 213px !important;
        
    }
    body #page-header-bg .row{
    	top: 23px !important;
    }
    }
    
    
    

    All the Best,

    -T


    ThemeNectar Support Team 

  • Fatima replied

    thanks, i tried that and its not working... im talking about chosing a hex color here... (see screengrab) 

  •  8,446
    Tahir replied

    Its probably getting overriden by css. 

    Thanks


    ThemeNectar Support Team 

  • Fatima replied

    how do i fix this? the header type keeps resizing and i dont know how to fix it.  which CSS is this? can i remove it? 

  •  8,446
    Tahir replied

    Hey Again!

    How do i find which header keeps resizing ?. 

    Thanks


    ThemeNectar Support Team 

  • Fatima replied

    its all of them.  the text always falls off the page when it resizes for the mobile site.  im attaching the screenshot....

  •   Tahir replied privately
  • Fatima replied

    it didnt resolve the issue....

  • Fatima replied

    here is how it still shows up on the iphone. can you resize the text? 

  •  988
    ThemeNectar replied

    Hey Fatima, please see my response to your other ticket in regards and feel free to modify the snippet I supplied to make the text even smaller if need be :)

  • Fatima replied

    thanks so much! it totally helped except it doesnt resize the nectar slide..... is there any way to resize the type on that? thanks so much!

  •  8,446
    Tahir replied

    Hey Fatima!

    Please see FAQ: http://themenectar.ticksy.com/faq/2037

    All the Best,

    -T


    ThemeNectar Support Team 

  • Fatima replied

    Hi Tahir, 

    thanks so much for that.  The only thing is that when i added all that code to my CSS in general settings it changed all my fonts and lost one of my images on the nectar slide. it also didnt change anything on my mobile screen.  That is the only thing i need to do left... is there any way you could help me with adjusting the type size on my mobile screen just for the nectar slide? its just that its the first thing people will see when they come to my site, so i dont want it to be falling off the page. the buttons arn't even on the visible screen....

    thanks for all your help. you've all been awesome and i cant believe ive managed to build my own site with your help!!! 

    Hearts, Fatima 

  •  8,446
    Tahir replied

    Fixed it with some custom CSS :) . 

    Cheers


    ThemeNectar Support Team 

  • Fatima replied

    thank you soooo much!!! thats so so sweet. 

    the only thing is that the type is still falling off the page when I look on my iphone.  should i just loose the headers? and just build a background with text? i cant seem to figure it out. 

    oh and what is the code that i should change for the size of the nectar slide type on the mobile phone? it is just too big and the buttons are falling off the page. 

    thanks again for alllll your help! 

  •  8,446
    Tahir replied

    I cant view your site anymore ?. 

    Thanks


    ThemeNectar Support Team 

  • Fatima replied

    its been relocated to www.iheart-this.com :) 

  •  988
    ThemeNectar replied

    Hey Fatima, sorry for the delay!

    Use this in the Custom CSS box located in your Salient Options panel: 

     @media only screen and (max-width: 690px) {
       html body .nectar-slider-wrap[data-fullscreen="true"] .swiper-slide .content h2 {
           font-size: 22px !important;
           line-height: 30px !important;
       }
    }
    

    Cheers