Inspiring

Answered

Need to stop horizontal page scroll. Issue with container size and padding.

Forum|Forum|6 years ago
July 29, 2019
3 replies
2206 views

Please download the attached file to view this post

This topic has been closed for replies.

Correct answer osgood_

kineticcreative123 wrote
Hello,
I have two questions regarding my buttons and the width of the page. The page loads fine with the horizontal layout is looking as it should but there is left padding behind the side menu which enables the page to scroll left to right. How can I adjust this so this doesn't happen. I like the spacing between the blue menu bar and the page content but can't figure out by just changing the padding.

I can point you in the right direction.

The horizontal scroll is being caused by these seperator divs in your main content:

<h1 class="text-overlay parallaxtext">Typography</h1>

</div>

You need to revise how you are deploying them.

I would give your main-content <div> (the one which wraps all your sections) a class of 'content-wrapper' and a left margin of 270px so it sits flush to the right of the blue sidebar.

.content-wrapper {

margin-left: 270px;

}

Then set the margin to zero again at 990px;

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

.content-wrapper {

margin-left: 0;

}

You just then need to figure out how you want those stretch-across2 <divs> to function without them forcing a horizontal scroll.

O

osgood_Correct answer

Legend

kineticcreative123 wrote
Hello,
I have two questions regarding my buttons and the width of the page. The page loads fine with the horizontal layout is looking as it should but there is left padding behind the side menu which enables the page to scroll left to right. How can I adjust this so this doesn't happen. I like the spacing between the blue menu bar and the page content but can't figure out by just changing the padding.

I can point you in the right direction.

The horizontal scroll is being caused by these seperator divs in your main content:

<h1 class="text-overlay parallaxtext">Typography</h1>

</div>

You need to revise how you are deploying them.

I would give your main-content <div> (the one which wraps all your sections) a class of 'content-wrapper' and a left margin of 270px so it sits flush to the right of the blue sidebar.

.content-wrapper {

margin-left: 270px;

}

Then set the margin to zero again at 990px;

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

.content-wrapper {

margin-left: 0;

}

You just then need to figure out how you want those stretch-across2 <divs> to function without them forcing a horizontal scroll.

kineticcreative123Author

Inspiring

Hey osgood!

Thank you for the reply. I did exactly as above but I'm at a loss for the last step You just then need to figure out how you want those stretch-acroos2 <div> to function without them forcing a horizontal scroll.

You will notice I moved the scroll id so ignore. This is my new html. Sorry for not giving you a live link. I would have to upload to that iON platform that throws all the crazy code in.

I also can't figure out why my buttons are all in the active stat when first loading the page.

<!DOCTYPE html>

<head>

<title>Premier Inc. - Branding Guidelines</title>

<style>

* {

box-sizing: border-box;

}

.logocolumn {

float: left;

width: 250px;

padding: 0 60px 0 0;

}

.clearspacecolumn {

float: left;

width: 450px;

padding: 0 60px 0 0;

}

/* Clearfix (clear floats) */

.logorow::after {

content: "";

clear: both;

display: table;

}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */

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

.logocolumn {

width: 60%;

}

.yellow-line {

border-top: 8px solid #ffb819;

width: 65px;

float: left;

}

.roboto {

font-size:3rem;

text-align: left;

font-family: 'Roboto', sans-serif;

font-weight: 300;

}

.robotoslab {

font-size:3rem;

text-align: left;

font-family: 'Roboto Slab', serif;

font-weight: 300;

}

.content-wrapper {

margin-left: 270px;

}

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

.content-wrapper {

margin-left: 0;

}

</style>

<style>

ul {

padding: 0;

list-style-type: none;

}

.colorli {

position: relative;

display:inline-block;

width:200px;

height:200px;

list-style:none;

margin:15px 15px 0px 0px;

}

.p1 {

line-height:1.25;

margin: 8px 25px 0px 0px;

text-align:right;

font-family: 'Lato', sans-serif;

font-size:14px;

color: #ffffff;

}

.copyright {

line-height:1.25;

text-align:center;

font-family: 'Lato', sans-serif;

font-size:12px;

color: #ffffff;

}

.span1 {

color: #ffffff;

font-weight: bold;

}

.color-1 { background-color: #003b49; }

.color-2 { background-color: #7a979f; }

.color-3 { background-color: #cad4d7; }

.color-4 { background-color: #f2f4f4; }

.color-5 { background-color: #0091b3; }

.color-6 { background-color: #8dc7d8; }

.color-7 { background-color: #d3e9ef; }

.color-8 { background-color: #ffc627; }

.color-9 { background-color: #ffe29b; }

.color-10 { background-color: #fff3d7; }

.color-11 { background-color: #000000; }

.color-12 { background-color: #e24301; }

.color-13 { background-color: #fea682; }

.white-line {

border-top: 1px solid #ffffff;

width: 80%;

margin-top: 25px;

}

.white-line2 {

border-top: 1px solid #ffffff;

width: 80%;

}

.white-line3 {

border-top: 1px solid #ffffff;

width: 80%;

margin-top: 20px;

}

.btn2{

border:2px solid;

color:#0091b3;

display:inline-block;

font-family: 'Roboto Slab';

font-weight:400;

font-size:16px;

line-height:40px;

text-align:center;

text-decoration:none;

width:220px;

-webkit-text-size-adjust:none;

mso-hide:all;

margin:25px 0px 25px 0px;

}

a:hover {

text-decoration: none;

}

</style>

<style>

.box-piesite {

text-align: left;

font-size: 22px;

}

.piesite {

position: relative;

width: 1em;

height: 1em;

font-size: 10em;

cursor: default;

}

.piesite .percent {

position: absolute;

top: 1.1em;

left: 0.1em;

width: 100%;

font-size: 0.3em;

text-align: center;

z-index: 2;

line-height: 1.25;

}

.piesite .percent .symbol {

font-size: 0.5em;

vertical-align: super;

opacity: 0.5;

}

.piesite > #slice {

position: absolute;

width: 1em;

height: 1em;

clip: rect(0px, 1em, 1em, 0.5em);

}

.piesite > #slice.gt50 {

clip: rect(auto, auto, auto, auto);

}

.piesite > #slice > .pie {

position: absolute;

border: 0.1em solid #444;

width: 1em;

height: 1em;

clip: rect(0em, 0.5em, 1em, 0em);

border-radius: 0.5em;

}

li.design .piesite > #slice > .pie {

border-color: #0091b3;

}

li.usability .piesite > #slice > .pie {

border-color: #003b49;

}

li.creativity .piesite > #slice > .pie {

border-color: #ffc627;

}

.piesite > #slice > .pie.fill {

-webkit-transform: rotate(180deg) !important;

transform: rotate(180deg) !important;

}

.piesite.fill > .percent {

display: none;

}

.piesite:after {

content: '';

display: block;

position: absolute;

top: 0.1em;

left: 0.1em;

width: 0.8em;

height: 0.8em;

background: #ffffff;

border-radius: 100%;

z-index: 1;

}

.piesite:before {

content: '';

display: block;

position: absolute;

width: 1em;

height: 1em;

border-radius: 0.5em;

opacity: 0.5;

z-index: 0;

}

.piesite:before {

background: #b8b8b8;

}

.box-piesite ul {

padding: 0;

}

.box-piesite ul li {

display: inline-block;

margin: 10px 20px;

}

</style>

<style>

.stretch-across {

height: 19em;

background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)), url('https://www.premierinc.com/external-assets/Branding-Guide/images/Crayons.png ') center center no-repeat fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

margin-bottom: 2em;

}

.stretch-across2 {

height: 19em;

background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)), url('https://www.premierinc.com/external-assets/Branding-Guide/images/Logo@3x-100.jpg') center center no-repeat fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

margin-bottom: 2em;

}

.stretch-across3 {

height: 19em;

background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)), url('https://www.premierinc.com/external-assets/Branding-Guide/images/Voice.png') center center no-repeat fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

margin-bottom: 2em;

}

.text-overlay {

color: white;

top: 50%;

transform: translateY(-50%);

margin-left: 105px;

margin-right: auto;

position: relative;

text-align: left;

width: 100%;

}

.parallaxtext {

margin-top: 0;

font-weight: bold;

font-family: 'Roboto Slab', 'Times New Roman', serif;

font-size: 3.5em;

}

</style>

<style>

:root {

--mainColor: #ffc627;

}

a {

background:

linear-gradient(

to bottom, var(--mainColor) 0%,

var(--mainColor) 100%

);

background-position: 0 100%;

background-repeat: repeat-x;

background-size: 4px 0px;

color: #000;

text-decoration: none;

transition: background-size .2s;

}

a:hover {

background-size: 4px 50px;

}

.active {

background-size: 4px 50px;

background-color: #ffc627;

color: #003b49 !important;

}</style>

</head>

</span>

</button>

</li>

<a class="nav-link js-scroll-trigger active" href="#colors" aria-pressed="true">Color</a>

</li>

<a class="nav-link js-scroll-trigger active" href="#typography" aria-pressed="true">Typography</a>

</li>

<a class="nav-link js-scroll-trigger active" href="#voice" aria-pressed="true">Voice</a>

</li>

</ul>

</div>

<img class="img-fluid img-profile mx-auto mb-2" width="150" src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_White_CMYK_Horiz_HiRes_2.png" alt=""> <p class="copyright">@ 2019 Premier Inc.</p>

</span>

</nav>

<h1 style="padding-bottom:2rem;" class="mb-0 responsivetitle">Brand

<span class="text-primary">Guidelines</span>

</h1>

<p class="mb-5">Welcome to our hub for partner guidelines and assets. We want to make it easy for you to integrate Premier in your creative assets while respecting our brand and legal/licensing restrictions.</p>

</div>

</section>

</div>

<div class="subheading mb-3">Accepted Versions</div>

</div>

</div>

<p class="mb-5">Black</p>

</div>

</div>

<p class="mb-5">White</p>

</div>

</div><div class="subheading mb-3">Clear Space</div>

<p style="margin: 0px;"><b>Clear Space - Print</b></p>

<p class="mb-5">In print materials, the preferred amount of clear

space around the logo is equal to the mobius.</p>

</div>

<p style="margin: 0px;"><b>Clear Space - Digital</b></p>

<p class="mb-5">Maintaining a 8 pixel clear space is preferable.</p>

</div>

<div class="subheading mb-3">Minimum Logo Size</div>

<p style="margin: 0px;"><b>Minimum Logo Size - Print</b></p>

<p class="mb-5">For print use, the logo should never be reduced

below the minimum size of 5.5cm x 1.2cm.</p>

</div>

<p style="margin: 0px;"><b>Minimum Logo Size - Digital</b></p>

<p class="mb-5">The logo should not appear smaller than

107 px wide in digital executions.</p>

</div>

<div><a href="https://www.premierinc.com/external-assets/Branding-Guide/Downloads/PINC_Logos.zip"

class="btn2">Download Logo Suite</a></div>

</div>

</section>

<h1 class="text-overlay parallaxtext">Color</h1>

</div>

<div class="subheading mb-3">Primary</div>

<div class="desc"><p class="p1"><span>Night Shift | PMS 309 C</span></p></div>

</li>

<div class="desc"><p class="p1"><span class "span1">Night Shift | 309@50</span></p></div>

</li>

<div class="desc"><p class="p1"><span class "span1" style="color:#000000">Night Shift | 309@20</span></p></div>

</li>

<div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">Night Shift | 309@5</span></p></div>

</li>

<div class="desc"><p class="p1"><span class "span1">Scrubs | PMS 632 C</span></p></div>

</li>

<div class="desc"><p class="p1"><span class "span1">Scrubs | 632@50</span></p></div>

</li>

<div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">Scrubs | 632@20</span></p></div>

</ul>

<div class="subheading mb-3">Secondary</div>

<div class="desc"><p class="p1"><span class "span1">Early Shift | PMS 123 C</span></p></div>

</li>

<div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">Early Shift | 123@50</span></p></div>

</li>

<div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">Early Shift | 123@20</span></p></div>

</li>

</ul>

<div class="subheading mb-3">Tertiary</div>

<div class="desc"><p class="p1"><span class "span1">BLACK</span></p></div>

<div class="desc"><p class="p1"><span class "span1">RICH BLACK</span></p></div>

</li>

</li>

</li>

</ul>

<div class="subheading mb-3">Color Proportion</div>

</li>

</li>

</li>

</ul>

</div>

</section>

<h1 class="text-overlay parallaxtext">Typography</h1>

</div>

<div class="subheading mb-3">Best Practices</div>

<p style="margin: 0px;"><b>Font Styles</b></p>

<p class="mb-5">Regular or Bold for headlines and subheads. Light or

Regular for body copy. Bold or Italic for emphasis.</p>

<p style="margin: 0px;"><b>Use Cases</b></p>

<p class="mb-5">Please refer to Premier’s Editorial Style Guide for proper usage of

uppercase, lowercase, sentence case, title case and all caps.</p>

<p style="margin: 0px;"><b>Roboto</b> Font Family</p>

<hr>

<div class="mb-5"><a href="https://fonts.google.com/specimen/Roboto"

class="btn2" target="_blank">Download Font Family</a></div>

<p style="margin: 0px;"><b>Roboto Slab</b> Font Family</p>

<hr>

<div class="mb-5"><a href="https://fonts.google.com/specimen/Roboto+Slab"

class="btn2" target="_blank">Download Font Family</a></div>

</div>

</section>

<h1 class="text-overlay parallaxtext">Voice</h1>

</div>

<p>Premier is an innovative team of leaders, thinkers and doers destined to change more than your bottom line. They are out to change the world of

healthcare. We are more than a healthcare GPO, we’re the sixth man on your team, a catalytic innovation machine that is transforming healthcare.</p>

<p class="mb-0">We are smart, but not arrogant. Premier is daring and innovative, achieving results other companies can only dream of. We are constantly

challenging the normal to achieve the exceptional. Premier is not in the technology, pharmacy or GPO industry, we are in the competency

industry. Bringing insight and solutions to problems that seem all but impossible to solve. We have a contagious excitement about the

work we do. Healthcare isn’t frozen yogurt of spandex yoga pants. There is a human-connection to the work we do because people’s lives

are at stake. Our parents, children, neighbors, friends, and people we have yet to meet, depend on a functional healthcare system and we

help make that happen. We are passionate about creating lasting change for our members to help create an unrivaled healthcare system.

Premier isn’t in real estate; we aren’t transactional in nature. Our company is full of gifted team members with a strong helper sense. Problem

solvers. Servant heart. Service-minded. Premier is tenacious, honest, ethical, ambitious, trustworthy, knowledgeable, dedicated, wellrounded,

versatile, curious, imaginative, witty, clever, resilient and compassionate. The stakes are high, and Premier is playing for keeps.</p>

</div>

</section>

</div>

$(document).ready(function() {

var $win = $(window),

$win_height = $(window).height(),

// - A multiple of viewport height - The higher this number the sooner triggered.

windowPercentage = $(window).height() * 0.9;

$win.on("scroll", scrollReveal);

function scrollReveal() {

var scrolled = $win.scrollTop();

///////////////////////////////////////

// Bar Charts scroll activate, looking for .trigger class to fire.

$(".trigger").each(function() {

var $this = $(this),

offsetTop = $this.offset().top;

if (

scrolled + windowPercentage > offsetTop ||

$win_height > offsetTop

) {

$(this).each(function(key, bar) {

var percentage = $(this).data("percentage");

$(this).css("height", percentage + "%");

///////////////////////////////////////

// Animated numbers

$(this).prop("Counter", 0).animate(

{

Counter: $(this).data("percentage")

},

{

duration: 2000,

easing: "swing",

step: function(now) {

$(this).text(Math.ceil(now));

}

);

// Animated numbers

///////////////////////////////////////

});

} else {

///////////////////////////////////////

// To keep them triggered, lose this block.

$(this).each(function(key, bar) {

$(this).css("height", 0);

});

}

});

///////////////////////////////////////

// Horizontal Chart

$(".chartBarsHorizontal .bar").each(function() {

var $this = $(this),

offsetTop = $this.offset().top;

if (

scrolled + windowPercentage > offsetTop ||

$win_height > offsetTop

) {

$(this).each(function(key, bar) {

var percentage = $(this).data("percentage");

$(this).css("width", percentage + "%");

///////////////////////////////////////

// Animated numbers

$(this).prop("Counter", 0).animate(

{

Counter: $(this).data("percentage")

},

{

duration: 2000,

easing: "swing",

step: function(now) {

$(this).text(Math.ceil(now));

}

);

// Animated numbers

///////////////////////////////////////

});

} else {

///////////////////////////////////////

// To keep them triggered, lose this block.

$(this).each(function(key, bar) {

$(this).css("width", 0);

});

}

});

///////////////////////////////////////

// Radial Graphs - scroll activate

$(".piesite").each(function() {

var $this = $(this),

offsetTop = $this.offset().top;

if (

scrolled + windowPercentage > offsetTop ||

$win_height > offsetTop

) {

if (piesiteFired == 0) {

timerSeconds = 3;

timerFinish = new Date().getTime() + timerSeconds * 1000;

$(".piesite").each(function(a) {

pie = $("#pie_" + a).data("pie");

timer = setInterval(

"stoppie(" + a + ", " + pie + ")",

0

);

});

piesiteFired = 1;

}

} else {

// To keep them triggered, lose this block.

$(".piesite").each(function() {

piesiteFired = 0;

});

}

});

}

scrollReveal();

});

///////////////////////////////////////

// The Radial Graphs

///////////////////////////////////////

// The following code is originally from the excellent pen:

// https://codepen.io/StephenScaff/pen/VYaQGB by Stephen Scaff

var timer;

var timerFinish;

var timerSeconds;

function drawTimer(c, a) {

$("#pie_" + c).html(

'<div class="percent"></div><div id="slice"' +

(a > 50 ? ' class="gt50"' : "") +

'><div class="pie"></div>' +

(a > 50 ? '<div class="pie fill"></div>' : "") +

"</div>"

);

var b = 360 / 100 * a;

$("#pie_" + c + " #slice .pie").css({

"-moz-transform": "rotate(" + b + "deg)",

"-webkit-transform": "rotate(" + b + "deg)",

"-o-transform": "rotate(" + b + "deg)",

transform: "rotate(" + b + "deg)"

});

a = Math.floor(a * 100) / 100;

arr = a.toString().split(".");

intPart = arr[0];

$("#pie_" + c + " .percent").html(

'<span class="int">' +

intPart +

"</span>" +

'<span class="symbol">%</span>'

);

}

function stoppie(d, b) {

var c = (timerFinish - new Date().getTime()) / 1000;

var a = 100 - c / timerSeconds * 100;

a = Math.floor(a * 100) / 100;

if (a <= b) {

drawTimer(d, a);

} else {

b = $("#pie_" + d).data("pie");

arr = b.toString().split(".");

$("#pie_" + d + " .percent .int").html(arr[0]);

}

}</script>

</body>

</html>

kineticcreative123Author

Inspiring

Your buttons are all in the active state as you have applied the active css class to all of the links by default. Theres no need to do that as this will happen automatically as and when each of your sections scrolls into the browser viewport. Remove all the active classes and just use Nancys css she provided.

As for your other issue, the horizontal scrolling, l would suggest looking at the css those stretch-across divs are using and see if you can track down what attribute of the css might be causing a horizontal scroll to appear

Fixed it. I removed "width 100%" on the text overlay style.

.text-overlay {

color: white;

top: 50%;

transform: translateY(-50%);

margin-left: 105px;

margin-right: auto;

position: relative;

text-align: left;

width:100%

}

Nancy OShea

Community Expert

My second question is how I can have each menu item have that solid yellow block

css

.nav-link {display:block}

.nav-link:active,

.nav-link:focus {

background-color: #ffc627 !important;

color: #003b49 !important;

}

HTML

<nav>

<ul>

</li>

</li>

</li>

</ul>

</nav>

Nancy O'Shea— Product User & Community Expert

kineticcreative123Author

Inspiring

Thank you Nancy! Worked great. I kept js-scroll-trigger to keep the smooth scroll and removed active and it worked.

Nancy OShea

Community Expert

You really need to upload your work to a server space you control so we can see it in our browsers. This is too much code to wade through in a forum for a simple layout question.

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded