Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #108103
    Laurie
    Participant

    my site is http://www.21stcenturymom.com
    I am using simple catch pro

    I would like my site title and tagline to appear within the header picture. I purposely choose an image that was blank on the left side so that my title and tag line could go there. How can I move it?

    #108140
    Mahesh
    Participant

    @lba14525: Go to Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS box and add the following CSS:

    #branding .wrapper {
        position: relative;
    }
    
    #header-content{
        position: absolute;
        top: 0;
        margin-top: 20px;
    }
      
    @media screen and (max-width: 990px) {
        #site-title {
            font-size: 45px;
            line-height: 45px;
        }
        #site-description {
            font-size: 25px;
            line-height: 25px;
        }
        
        #site-details {
            margin-top: 75px;
            margin-left: 20px;
        }
    }
      
    @media screen and (max-width: 767px) {
        #site-details {
        	text-align: left;
        }
        #site-details {
            margin-top: 45px;
        }
    }
      
    @media screen and (max-width: 700px) {
        #site-title {
            font-size: 35px;
            line-height: 35px;
        }
        #site-description {
            font-size: 20px;
            line-height: 20px;
        }
        
        #site-details {
            margin-top: 20px;
        }
    }
      
    @media screen and (max-width: 540px) {
        #site-title {
            font-size: 25px;
            line-height: 25px;
        }
        #site-description {
            font-size: 15px;
            line-height: 15px;
        }
    }
      
    @media screen and (max-width: 480px) {
        #site-title {
            font-size: 25px;
            line-height: 25px;
        }
        #site-description {
            font-size: 15px;
            line-height: 15px;
        }
        #site-details {
            margin-top: 10px;
        }
    }
      
    @media screen and (max-width: 400px) {
        #site-title {
            font-size: 22px;
            line-height: 22px;
        }
        #site-description {
            font-size: 14px;
            line-height: 14px;
        }
        #site-details {
            margin-top: 0;
          margin-left: 5px;
        }
    }

    Regards,
    Mahesh

    #108163
    Laurie
    Participant

    Thank you!!!!! Worked perfectly!!!!

    #108246
    Mahesh
    Participant

    @lba14525: Thank you for your appreciation. Have a nice day!

    Regards,
    Mahesh

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Move Site title and tagline over header image’ is closed to new replies.