h1 text intact on sec-1 on mobile display?

  • Resolved Ganesh

    (@manoj-hp)


    8 years, 11 months ago

    How to make <h1> text on section 1 ( title) to make it stay intact for a word in smaller displays like mobile?

    lets say my website title is “THE TECHNOLOGICAL ADVANCE CARE”
    in pc display it show gud.. but when its on mobile display.. its show as this —
    Mobile display :-

    [ Moderator note: code fixed. Please wrap code in the backtick character or use the code button. ] 

    |----------------------|
   ||--------------------||
   || (logo)           = ||  <---header
   ||....................||
   ||                    ||
   ||  (BG)              ||  <---section 1
   ||       T H E        ||
   ||    T E C H O N O L ||
   ||  O G I C A L   A D ||  <--- non intact words
   || V A N C E  C A R E ||
   ||                    ||
   ||         V          ||  <--- click scroll
   ||--------------------||

    i want that text to be like this
    Mobile display :-

    |----------------------|
   ||--------------------||
   || (logo)           = ||  <---header
   ||....................||
   ||                    ||
   ||  (BG)              ||  <---section 1
   ||       T H E        ||
   ||    TECHNOLOGICAL   ||
   ||    A D V A N C E   ||  <--- Intact words
   ||      C A R E       ||
   ||                    ||
   ||         V          ||  <--- click scroll
   ||--------------------||

    ?? sorry. no image upload option.. well thanks in advance..:)

Viewing 15 replies - 16 through 30 (of 30 total)

  • That worked! Thanks so much!

    Thread Starter Ganesh

    (@manoj-hp)

    im the op..
    My website is https://www.sbrtgroup.com .
    i tried code with custom css plugin..:( but dindt work. help needed

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Clear your browser’s cache and check again

    Thread Starter Ganesh

    (@manoj-hp)

    yep. did. now the word is intact
    but.. it went out of display..:(
    like this
    | sri
    | basavara
    | rice
    | tech

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What would you expect to happen if the word is no longer breaking?

    Thread Starter Ganesh

    (@manoj-hp)

    i know.. but i was hoping like..
    the code would find the display length of devise im browsing with and adjust the font size according to it..:( i want that code

    Thread Starter Ganesh

    (@manoj-hp)

    and my menu fonts and so many fonts are changed:(( i dono how.. it looks diffrent on chrome and firefox

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You can do that. Try adding this CSS as well:

    @media screen and (max-width: 340px) {

	.banner-box h1 {
		line-height: 1.5;
		font-size: 200%;
	}
}

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Your menu fonts changed when you put this inside the Custom CSS Manager plugin:

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

    I’m not sure why you did that.

    Thread Starter Ganesh

    (@manoj-hp)

    oops.. how to revert them back?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You can simply remove the code that you don’t want and save

    Thread Starter Ganesh

    (@manoj-hp)

    not working..:( the fonts still show same on google chrome.. but they show correctly in firefox. oh god:(

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    It sounds like you need to clear your browser’s cache again.

    To clarify, all of the code that you should have in the Custom CSS Manager plugin is below:

    .banner-box h1 {
    word-wrap: normal;
}

@media screen and (max-width: 340px) {

	.banner-box h1 {
		line-height: 1.5;
		font-size: 200%;
	}
}

    Thread Starter Ganesh

    (@manoj-hp)

    yes the code in custom css plugin is same as u said..
    but still fonts on google chrome is messed up.. is fonts on ur google chrome showing up correct?
    and the font size is not reducing even with that code:(

    Thread Starter Ganesh

    (@manoj-hp)

    ohh ya…. ?? i did it.. the fonts get smaller.. thank u soooooooooooooo much for having patience to explain. thank u once again.. :))

Viewing 15 replies - 16 through 30 (of 30 total)
  • The topic ‘h1 text intact on sec-1 on mobile display?’ is closed to new replies.