Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] H1 text Rotation vertical to horizontal

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #194192
    analis
    Participant

    I have a div width: 100% with inside <h1></ h1>

    with a mobile device if I switch from portrait to landscape, the text that is inside <h1></h1> not widens.

    why?

    if I put the text outside <h1></h1> works and widens.

    thanks

    #194194
    Senff
    Participant

    Depends what styles you have on your H1 element. You have a link to your site or can you create a reduced case in Codepen?

    #194197
    analis
    Participant

    #content h1{font-size:1.1em;margin:0;font-weight:bold;}

    #194228
    analis
    Participant
    #194229
    Paulie_D
    Member

    A link to the actual site would be better but text doesn’t “widen” anyway.

    I’m wondering how you expect this to change.

    Also, it’s rarely necessary to float an element that has 100% width.

    #194231
    analis
    Participant

    if the text is outside <h1> work why?

    #194233
    Paulie_D
    Member

    A link to the actual site would be better.

    Text doesn’t widen…elements do, so I suspect that, in some way, the element’s width is being ‘restricted’ but I’m still not clear on what ‘widening’ actually looks like.

    #194240
    analis
    Participant

    I deleted float:lef but not work.

    the text remains as in the vertical position does not expand

    #194241
    Paulie_D
    Member

    Seriously, if we can’t see it on a live site, I’m not sure we can help you.

    #194243
    analis
    Participant

    not in public

    you email address?

    #194244
    Paulie_D
    Member

    Nope…not in public.

    You can always obscure the web link by using bit.ly

    #194260
    analis
    Participant

    I forgot to write this:

    *, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }

    #content{width:100%;text-align:center;color:#000;padding:0px 5px 0px 5px;}

    the problem is the padding!

    how can I fix it?

    #194262
    Paulie_D
    Member

    Can’t say it enough…without seeing it in the actual live environment it’s hard to help.

    Not sure why padding would be an issue but you may need to address it with an orientation media query.

    #194276
    analis
    Participant

    so it works

    padding:0px 0px 0px 0px;

    or so it works

    .title{width:98%;}

    mmmm

    #194286
    Paulie_D
    Member

    I give up.

    If you found something that works, good for you..but I’m done repeating myself.

Viewing 15 posts - 1 through 15 (of 19 total)
  • The forum ‘CSS’ is closed to new topics and replies.