Minimum Pro title width

Community Forums Forums General Discussion Minimum Pro title width

This topic is: resolved

This topic contains 5 replies, has 2 voices, and was last updated by  kduffey 8 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #74397

    kduffey
    Participant
    Post count: 27

    Hi there,

    I want to extend the width of the title here: http://www.cbboca.com/

    I added .site-title { width:340px; } in order to override this area and keep the title all on one line, but now it screws up the responsiveness and the title is no longer centered on the mobile devices.

    How can I keep the title on one line w/o ruining the responsive look of the title?

    Thanks

    http://www.cbboca.com/
    #75111

    kduffey
    Participant
    Post count: 27

    Any advice here?

    #75185

    nutsandbolts
    Moderator
    Post count: 3104

    Did you get this resolved? I’m seeing the site title on one line at all browser widths.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #75316

    kduffey
    Participant
    Post count: 27

    I changed the width so it’s all on one line. And now, as a result, at other browser widths, the site title is no longer centered. Before, it was centered on ipads, etc.

    How do I keep it on one line AND centered on mobile and tablet views??

    #75318

    nutsandbolts
    Moderator
    Post count: 3104

    Okay, find this:

    @media only screen and (max-width: 1023px)
    .post-type-archive-portfolio .entry, 
    .site-header .title-area, 
    .site-header .search-form, 
    .site-header .widget-area, 
    .site-tagline-left, 
    .site-tagline-right {
            text-align: center;
    }

    and change it to this:

    @media only screen and (max-width: 1023px)
    .post-type-archive-portfolio .entry, 
    .site-header .title-area, 
    .site-header .search-form, 
    .site-header .widget-area, 
    .site-tagline-left, 
    .site-tagline-right {
            text-align: center;
            width: 100%;
    }

    That makes it centered again for mobile and tablet, though the text does wrap to a second line for phones. To fix that, go to the very end of the stylesheet and find this:

    @media only screen and (max-width: 320px) {
    
    	.header-image .site-header .title-area .site-title a {
    		background-size: contain !important;
    	}
    }

    That won’t work since your site title is text and not an image. Replace it with this:

    @media only screen and (max-width: 320px) {
    
    	.site-title, .site-title a {
    		font-size: 18px;
    		font-size: 1.8rem;
    	}
    }

    That should get the text to resize enough to stay on one line.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #75324

    kduffey
    Participant
    Post count: 27

    Thanks for your help

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Minimum Pro title width’ is closed to new replies.