Blog woes: Wordpress cut my banner!

ThirithThirith Registered User regular
In the hope that we've got some Wordpress wizzes here (my next port of call will be the Wordpress forums, but I've known posters here to be helpful and knowledgeable about a worrying number of things): we've just renamed our blog and added a banner pic specially made for a friend. The banner includes the new name of our blog.

Problem is, I didn't consider that the theme would resize the banner dynamically so the site would work on various devices and screen sizes. This means that the actual title is cut off on most of the screens that people would be using, which sucks.

I now have the following questions: Are there any good Wordpress themes we can use (we've got the Premium plan) that allow for a set banner width? And, in concrete terms, what does that mean? Do such themes require three different banners: one for computers, one for tablets and one for mobile phones? I'd imagine that any theme that dynamically resizes banners will be likely to hack off some of the text...

webp-net-resizeimage.jpg
"Nothing is gonna save us forever but a lot of things can save us today." - Night in the Woods

Posts

  • EncEnc A Fool with Compassion The Land of Flowers (and Dragons)Registered User regular
    edited September 2017
    You could set the CSS on any item to adjust the banner width or minimum/maximum size for those things. I did something similar for Falleron to expand my content so I could have tables for D&D things.

    You have the CSS editor with your level of plan? I have the following on mine:
    .site {
    	max-width: 1260px;
    }
    
    .site-header {
    	max-width: 1260px;
    }
    
    .hentry {
    	max-width: 1260px;
    }
    
    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content .entry-meta,
    .page-content {
    	max-width: 1260px;
    }
    
    .post-navigation,
    .image-navigation {
    	max-width: 1260px;
    }
    
    .archive-header,
    .page-header {
    	max-width: 1260px;
    }
    
    .contributor-info {
    	max-width: 1260px;
    }
    
    .comments-area {
    	max-width: 1260px;
    }
    
    .site-main .mu_register,
    .widecolumn > h2,
    .widecolumn > form {
    	max-width: 1260px;
    }
    

    Enc on
  • ThirithThirith Registered User regular
    edited September 2017
    Edit: Double post.

    Thirith on
    webp-net-resizeimage.jpg
    "Nothing is gonna save us forever but a lot of things can save us today." - Night in the Woods
  • ThirithThirith Registered User regular
    Thanks, I'll experiment with that. On the Wordpress support forums I also got a tip, namely to use CSS to set the background position to left-center, and while that doesn't solve the problem completely, it already helps; at least the title isn't cut off on tablets.

    webp-net-resizeimage.jpg
    "Nothing is gonna save us forever but a lot of things can save us today." - Night in the Woods
Sign In or Register to comment.