Bouquet theme header cut off

  • Author
    Posts
  • #976907

    I have Bouquet theme. The header I uploaded fits perfectly on my computer screen, but on my son’s and husband’s computers the header is cut off on the right side – in the middle of the last word. However, none of the body is cut off on their computers. Does anyone know why this is and how I can solve the problem? My link is: http://vegetariancookingforcarnivores.wordpress.com

    Thanks!

    The blog I need help with is vegetariancookingforcarnivores.wordpress.com.

    #977164

    Howdy,

    What’s the screen resolution on your son’s and husband’s computers? Can you take a screenshot from their computer, then upload it to your Media Library?

    The likely reason is due to a lower resolution setting, where the Bouquet theme maximum width is 1100 pixels.

    The reason why the body isn’t “cut off” is due to the theme’s responsive design.

    #977165

    Ahhh – I wondered if the body was responsive. It’s too bad the header isn’t responsive, too. Is the solution to make my header narrower. I shoved over my text to compensate for the cutting off which worked for my son’s tiny screened laptop, but my husband is using an ipad and it still cuts of after the ‘C’ in Carnivores. My worry is the audience ‘out there’ who may be turned off by looking at a partial header if they’re using an ipad.

    Is there a code I can put into the header to make it responsive? Thanks.

    #977166

    Is there a code I can put into the header to make it responsive?

    Absolutely. You’ll need to edit the CSS to do this, which requires the Custom Design upgrade.

    If you’d like us to help with this, please reply to this forum thread after purchasing the Custom Design upgrade from the Store in your dashboard, and I’ll be happy to move this thread to the CSS Customization forum to help there. :-)

    #977167

    I purchased the Custom Design upgrade. Can you help me make my header responsive, please.

    Thanks.

    #977168

    Sure! The header image in the Bouquet theme is setup using the CSS “background” property, and so it is something you can change.

    The only caveat in this case is that the “background-size” property is CSS3 and so it’s not supported in all older browsers, like IE 8. You can see this browser background compatibility chart:

    http://www.quirksmode.org/css/background.html

    In Appearance -> Custom Design -> CSS, you can add the following to your CSS Editor, then click Save Stylesheet, and it’ll work in all up-to-date browsers (I’ve added comments for reference):

    /* for the responsive header image */
    
    #branding {
        background-size: contain;
    	background-position: center;
        background-repeat: no-repeat;
    }
    
    @media (max-width: 1140px) {
    	#branding, .header-link {
    		height: 120px;
    	}
    }
    @media (max-width: 860px) {
    	#branding, .header-link {
    		height: 100px;
    	}
    }
    
    @media (max-width: 650px) {
        #branding, .header-link {
        	height: 80px;
    	}
    }
    
    @media (max-width: 450px) {
        #branding, .header-link {
            height: 60px;
    	}
    }
    
    /* removes border for the responsive header image */
    
    #branding {
        border:0;
        box-shadow: none;
    }
    #977169

    I just want to be sure I understand before I do anything. When I went to ‘CSS’ this was already there:
    #branding {
    background-size:contain;
    background-position:center;
    }

    @media (max-width: 650px) {
    #branding,.header-link {
    min-height:80px;
    }
    }

    @media (max-width: 480px) {
    #branding,.header-link {
    min-height:60px;
    }
    }

    Am I supposed to copy & paste the code you wrote after what’s already there?

    #977170

    Am I supposed to copy & paste the code you wrote after what’s already there?

    Ah! You can delete what’s there, then copy and paste what’s above. :-)

    #977171

    It worked! Thank you so much. Don’t you love coding?! It’s so incredible!

    #977172

    You’re welcome! I love how things work out like this. :-)

    For the record, mfields and designsimply were a huge help, so major props to them.

    Happy blogging!

The topic ‘Bouquet theme header cut off’ is closed to new replies.