Responsive-mode – long site title wrapping blues

Home Forums Auberge Responsive-mode – long site title wrapping blues

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #19153

    katw
    Participant

    Responsive-mode – long site title wrapping blues

    Resolved

    Hi,

    I have a super long site heading which doesn’t sit well with your collapsed heading layout on small devices.

    I would like to shift the site-title to left and give it more room, and move the menu-toggle to right.

    I have come up with this but am unsure if my override for LEFT will work on all browsers as it has precedence over right position settings.

    
    @media only screen and (max-width: 54.9375em) {
    
    .site-header {padding-left:1rem;}
    
    .menu-toggle {
    	left:unset;
    	right: 1rem;
    	}
    }

    Advice or corrections please.

    #19164

    Oliver Juhas
    Keymaster

    Hi Kat,

    Please note that there is no unset value for left CSS property. Use auto instead. Otherwise your CSS code will work.

    Best regards,

    Oliver Juhas
    WebMan Design

    #19167

    katw
    Participant

    Hi Oliver,

    I think unset is a global property.

    MSDN Reference – Left property

    It appears to be working on Firefox, Chrome, Safari.. will keep testing.

    Thanks

    #19168

    Oliver Juhas
    Keymaster

    Hi Kat,

    What you need is to reset the left property to either zero or basically negate it altogether. The default value of that property in CSS is auto, and that’s the best value in this case.

    unset is actually parent-conscious value, so it can inherit unwanted value. Besides, unset and initial are not working in Internet Explorer browsers.

    Best regards,

    Oliver Juhas
    WebMan Design

    #19177

    katw
    Participant

    OK, Thanks for that. I always thought ‘auto’ was not a reset word; but now I know better.

    Thanks I didn’t see IE wasn’t supported; good catch.

    Appreciate the clarification.

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

You must be logged in to reply to this topic.