Support » Theme: Twenty Sixteen » Massive gap between posts

  • Resolved rthorntn

    (@rthorntn)


    Hi,

    On:

    /solutions/
    /services/
    /products/

    One tiny niggle is there are huge gaps between each post, for example between the bottom of Application Security and the top of Device Discovery & Management on /solutions/

    How do I make the posts closer together?

    Thanks.
    Richard

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Hi, I think I got that covered in one of your other threads. Please see my reply there 🙂

    Thanks @jarretc

    With:

    .page-template #content .wrapper .row {
    padding-top: 50px;
    }

    I’m getting inconsistent results across /solutions/ /services/ /products/

    Could it be something to do with the different templates for those pages?

    I’m getting weird results when I make the browser window narrower, it happens on /solutions/ /services/ but not with /products/ (/products/ has featured images not “two columns two-thirds one-third” split with no featured images), see:

    snip

    It’s like when you narrow the browser window the empty featured image placeholder reappears, if you narrow it even further it behaves itself.

    Aaarggghhh this stuff is a bit of a nightmare.

    • This reply was modified 2 weeks, 6 days ago by rthorntn.
    • This reply was modified 2 weeks, 6 days ago by rthorntn.
    • This reply was modified 2 weeks, 6 days ago by rthorntn.

    I think this will fix the display issue at certain browser widths

    @media only screen and (min-width: 990px) {
    	.col-l-6 {
    	width: 100%;
    	}
    }

    Not seeing much of an issue with the padding-top right now though when I test on the different pages. What issues in particular are you seeing?

    The different setups across the pages do make it a bit more difficult to target everything at once.

    @jarretc that fixed it, amazing thanks!

    Going to pick my battles on the padding, it’s good now.

    I think with all the custom CSS I have now has impacted mobile browsing on iOS Chrome.

    @media only screen and (min-width: 1198px) {
    	.page-template .wrapper .row .col-xl-6, .page-template .wrapper .row .col-l-6 {
    		width: 100%;
    	}
    }
    
    .banner-text h1 {
      font-weight: 500;
      font-size: 72px;
    }
    
    #content p {
      font-size: 16px;
    }
    
    .page-template-services #content .wp-block-group .wp-block-image {
      margin-top: -25px;
    }
    
    .page-template-solutions #content .wp-block-group .wp-block-image {
      margin-top: -30px;
    }
    
    .page-template-products #content .row .pro-box {
      border: none;
    }
    
    .banner-text p {
      font-size: 21px;
    }
    
    .page-template #content .wrapper .row {
            padding-top: 50px;
    }
    
    @media only screen and (min-width: 990px) {
            .col-l-6 {
            width: 100%;
            }
    }

    Getting enormous fonts and images going over text.

    I think the culprits are banner-text h1 being a fixed size and the margin-top on services and solutions, an override for mobile maybe?

    It never rains but it pours.

    Thanks again.

    • This reply was modified 2 weeks, 6 days ago by rthorntn.
    • This reply was modified 2 weeks, 6 days ago by rthorntn.
    • This reply was modified 2 weeks, 6 days ago by rthorntn.

    This should get you set

    @media only screen and (max-width: 768px) {
    	#banner .banner-text h1 {
    		font-size: 30px;
    	}
    	.page-template-services #content .wp-block-group .wp-block-image, .page-template-solutions #content .wp-block-group .wp-block-image {
    		margin-top: 0px !important;
    	}
    }

    Can adjust both the 30px value and 0px

    @jarretc great, mucho thanks!

    Tiny thing but on mobile for some reason “the natural selection for cyber security” is missing from underneath “Evolved Security” on the home page?

    It’s under Banner Text in a field group:

    <h1>Evolved Security</h1>
    <p>the natural selection for cyber security</p>
    <a href="?p=21" class="readmore">Read More</a>
    

    As an aside would you be OK reaching out to me on email at richard@ just want to say thanks?

    Cheers
    Richard

    Add the following to the last piece of code I gave you

    #banner .banner-text p {
    		display: block;
    	}

    Just make sure it is listed inside of the last } if that makes sense.

    Thank you, thank you, thank you @jarretc

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.