Results 1 to 3 of 3

Thread: Wrapping Issue

  1. #1
    Junior Member
    Join Date
    Nov 2015

    Wrapping Issue

    My header has a large logo on the right side, and 1 each line of three and two word h1 and h2, respectively, on the left side. When I reduce my browser window, my h1 line breaks, pushing the longer words under the logo - see screenshot
    I tried adding white-space: nowrap to the division that holds h1 and h1 and I also tried adding the nowrap to each h individually, but both ways cause my text run over the logo instead of moving under it.

    <div class="page-header">
    <img src="graphics/thunderSeriesLogo.png" alt="Thunder Series Logo">
    <div class="headerText">
    	<h1>Peter J. Publicinsky</h1>
    	<h2>12 Something</h2>
    	</div> <!-- closing headerText -->
    </div> <!-- page-header -->
    .page-header img {
    	float: right;
    	margin-top: -35px;
    .headerText {
    	color: #3788F8;
    	font-size: 200%;
    	font-family:'Inknut Antiqua', serif;
    	text-shadow: 4px 4px 4px #3D3D40;
    	margin-left: 10%;
    	padding-top: 2%;
    .headerText h1, .headerText h2 {
    	white-space: nowrap;
    I'd appreciate any help.

  2. #2
    Join Date
    Nov 2015
    I'd start by making the image responsive "<img class="img-responsive" src...." so that the image size scales down when resizing small screen widths. That may help. FYI I have several sites that are responsive and in some cases I have to have two internal divisions that are shown or are hidden depending upon screen size. With these I use the bootstrap visible or hidden classes.
    Last edited by Rick; 01-25-2016 at 10:15 PM. Reason: wrong class info

  3. #3
    Junior Member
    Join Date
    Nov 2015
    Thanks - I tried what you suggested, but it's not working.
    I'll try adding some grid detail tomorrow.
    Last edited by AndreaTX; 01-25-2016 at 11:30 PM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts