I have a Hugo template I am attempting to use. However, certain divs attempt to scroll horizontally, but on Chrome or Firefox on Linux I cannot manipulate the horizontal scroll bar. The horizontally scroll bar is present and looks normal, but I cannot move the slider.
Why is horizontal scrolling not working correctly on some browsers/OSes?
Interestingly, this appears to not be an issue on Chrome or FF when running Mac, which leads me to believe it's some kind of bizarre platform issue.
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<article id="ARTICLE_1">
<div id="DIV_2">
<h1 id="H1_3">Getting started <a href="#" id="A_4" title=
"Permanent link">#</a></h1>
<h2 id="H2_5">Installation<a href="#installation" id="A_6" title=
"Permanent link">#</a></h2>
<h3 id="H3_7">Installing Hugo<a href="#installing-hugo" id="A_8" title=
"Permanent link">#</a></h3>
<p id="P_9">Hugo itself is just a single binary without dependencies on
expensive runtimes like Ruby, Python or PHP and without dependencies on any
databases. You just need to download the <a href=
"https://github.com/spf13/hugo/releases" id="A_10">latest version</a>. For
more information read the official <a href=
"http://gohugo.io/overview/installing/" id="A_11">installation
guides</a>.</p>
<p id="P_12">Let’s make sure Hugo is set up as expected. You should see a
similar version number in your terminal:</p>
<pre id="PRE_13"><code class="language-sh hljs bash" id=
"CODE_14">hugo version
<span class="hljs-comment" id=
"SPAN_15"># Hugo Static Site Generator v0.15 BuildDate: 2016-01-03T12:47:47+01:00</span>
</code>
</pre>
<h3 id="H3_16">Installing Material<a href="#installing-material" id="A_17"
title="Permanent link">#</a></h3>
<p id="P_18">Next, assuming you have Hugo up and running the <code id=
"CODE_19">hugo-material-docs</code> theme can be installed with <code id=
"CODE_20">git</code> :</p>
<pre id="PRE_21"><code class="language-sh hljs bash" id=
"CODE_22"><span class="hljs-comment" id=
"SPAN_23"># create a new Hugo website</span>
hugo new site my-awesome-docs
<span class="hljs-comment" id=
"SPAN_24"># move into the themes folder of your website</span>
<span class="hljs-built_in" id="SPAN_25">cd</span> my-awesome-docs/themes/
<span class="hljs-comment" id="SPAN_26"># download the theme</span>
git <span class="hljs-built_in" id=
"SPAN_27">clone</span> git#github.com:digitalcraftsman/hugo-material-docs.git
long line aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
</code>
</pre>
<h2 id="H2_28">Setup<a href="#setup" id="A_29" title=
"Permanent link">#</a></h2>
<p id="P_30">Next, take a look in the <code id="CODE_31">exampleSite</code>
folder at <code id="CODE_32">themes/hugo-material-docs/</code> . This
directory contains an example config file and the content that you are
currently reading. It serves as an example setup for your documentation.</p>
<p id="P_33">Copy at least the <code id="CODE_34">config.toml</code> in the
root directory of your website. Overwrite the existing config file if
necessary.</p>
<p id="P_35">Hugo includes a development server, so you can view your
changes as you go - very handy. Spin it up with the following command:</p>
<pre id="PRE_36"><code class="language-sh hljs bash" id=
"CODE_37">hugo server
</code>
</pre>
<p id="P_38">Now you can go to <a href="http://localhost:1313" id=
"A_39">localhost:1313</a> and the Material theme should be visible. You can
now start writing your documentation, or read on and customize the theme
through some options.</p>
<aside id="ASIDE_40">
© 2017 Released under the MIT license – Documentation built with <a href=
"https://www.gohugo.io" id="A_41">Hugo</a> using the <a href=
"http://github.com/digitalcraftsman/hugo-material-docs" id=
"A_42">Material</a> theme.
</aside>
<footer id="FOOTER_43">
<nav id="NAV_44">
<div id="DIV_45"></div>
<div id="DIV_46">
<a href="http://localhost:1313/adding-content/" id="A_47" title=
"Adding content"><span id="SPAN_48">Next</span></a>
<div id="DIV_49">
<div id="DIV_50">
<div id="DIV_51">
Adding content
</div>
</div>
<div id="DIV_52">
<i id="I_53"></i>
</div>
</div>
</div>
</nav>
</footer>
</div>
</article>
</body>
</html>
CSS:
#DIV_1 {
box-sizing: border-box;
color: rgba(0, 0, 0, 0.870588);
height: 808px;
text-size-adjust: 100%;
width: 699px;
column-rule-color: rgba(0, 0, 0, 0.870588);
perspective-origin: 349.5px 404px;
transform-origin: 349.5px 404px;
border: 0px none rgba(0, 0, 0, 0.870588);
font: normal normal normal normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
outline: rgba(0, 0, 0, 0.870588) none 0px;
padding: 128px 24px 96px;
}
/*#DIV_1*/
#H1_2 {
box-sizing: border-box;
color: rgb(232, 78, 64);
height: 95px;
text-size-adjust: 100%;
width: 651px;
column-rule-color: rgb(232, 78, 64);
perspective-origin: 325.5px 47.5px;
transform-origin: 325.5px 47.5px;
border-top: 0px none rgb(232, 78, 64);
border-right: 0px none rgb(232, 78, 64);
border-bottom: 1px solid rgba(0, 0, 0, 0.117647);
border-left: 0px none rgb(232, 78, 64);
font: normal normal normal normal 24px / 32px Ubuntu, Helvetica, Arial, sans-serif;
margin: 0px;
outline: rgb(232, 78, 64) none 0px;
padding: 20px 0px 42px;
}
/*#H1_2*/
#A_3 {
box-sizing: border-box;
color: rgba(0, 0, 0, 0.258824);
display: block;
float: right;
height: 32px;
text-decoration: none;
text-size-adjust: 100%;
width: 9.34375px;
column-rule-color: rgba(0, 0, 0, 0.258824);
perspective-origin: 4.67188px 16px;
transform-origin: 4.67188px 16px;
border: 0px none rgba(0, 0, 0, 0.258824);
font: normal normal normal normal 14px / 32px Ubuntu, Helvetica, Arial, sans-serif;
margin: 0px 0px 0px 20px;
outline: rgba(0, 0, 0, 0.258824) none 0px;
transition: color 0.25s ease 0s;
}
/*#A_3*/
#H2_4, #H2_13 {
box-sizing: border-box;
color: rgb(232, 78, 64);
height: 128px;
text-size-adjust: 100%;
width: 651px;
column-rule-color: rgb(232, 78, 64);
perspective-origin: 325.5px 64px;
transform-origin: 325.5px 64px;
border: 0px none rgb(232, 78, 64);
font: normal normal normal normal 20px / 28px Ubuntu, Helvetica, Arial, sans-serif;
margin: -64px 0px 0px;
outline: rgb(232, 78, 64) none 0px;
padding: 100px 0px 0px;
}
/*#H2_4, #H2_13*/
#A_5, #A_14 {
box-sizing: border-box;
color: rgba(0, 0, 0, 0.258824);
display: block;
float: right;
height: 28px;
text-decoration: none;
text-size-adjust: 100%;
width: 9.34375px;
column-rule-color: rgba(0, 0, 0, 0.258824);
perspective-origin: 4.67188px 14px;
transform-origin: 4.67188px 14px;
border: 0px none rgba(0, 0, 0, 0.258824);
font: normal normal normal normal 14px / 28px Ubuntu, Helvetica, Arial, sans-serif;
margin: 0px 0px 0px 20px;
outline: rgba(0, 0, 0, 0.258824) none 0px;
transition: color 0.25s ease 0s;
}
/*#A_5, #A_14*/
#H3_6 {
box-sizing: border-box;
color: rgba(0, 0, 0, 0.870588);
height: 107px;
text-size-adjust: 100%;
width: 651px;
column-rule-color: rgba(0, 0, 0, 0.870588);
perspective-origin: 325.5px 53.5px;
transform-origin: 325.5px 53.5px;
border: 0px none rgba(0, 0, 0, 0.870588);
font: normal normal bold normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
margin: -64px 0px 0px;
outline: rgba(0, 0, 0, 0.870588) none 0px;
padding: 84px 0px 0px;
}
/*#H3_6*/
#A_7 {
box-sizing: border-box;
color: rgba(0, 0, 0, 0.258824);
display: block;
float: right;
height: 23px;
text-decoration: none;
text-size-adjust: 100%;
width: 9.34375px;
column-rule-color: rgba(0, 0, 0, 0.258824);
perspective-origin: 4.67188px 11.5px;
transform-origin: 4.67188px 11.5px;
border: 0px none rgba(0, 0, 0, 0.258824);
font: normal normal normal normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
margin: 0px 0px 0px 20px;
outline: rgba(0, 0, 0, 0.258824) none 0px;
transition: color 0.25s ease 0s;
}
/*#A_7*/
#P_8 {
box-sizing: border-box;
color: rgba(0, 0, 0, 0.870588);
height: 46px;
text-size-adjust: 100%;
width: 651px;
column-rule-color: rgba(0, 0, 0, 0.870588);
perspective-origin: 325.5px 23px;
transform-origin: 325.5px 23px;
border: 0px none rgba(0, 0, 0, 0.870588);
font: normal normal normal normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
margin: 21px 0px 0px;
outline: rgba(0, 0, 0, 0.870588) none 0px;
}
/*#P_8*/
#CODE_9, #CODE_10 {
box-sizing: border-box;
color: rgb(232, 78, 64);
text-size-adjust: 100%;
white-space: nowrap;
column-rule-color: rgb(232, 78, 64);
background: rgb(238, 238, 238) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(232, 78, 64);
font: normal normal normal normal 14px / 23.8px "Ubuntu Mono", "Courier New", Courier, monospace;
outline: rgb(232, 78, 64) none 0px;
padding: 2px 4px;
}
/*#CODE_9, #CODE_10*/
#PRE_11 {
box-sizing: border-box;
color: rgba(0, 0, 0, 0.870588);
height: 78px;
text-size-adjust: 100%;
width: 699px;
column-rule-color: rgba(0, 0, 0, 0.870588);
perspective-origin: 349.5px 39px;
transform-origin: 349.5px 39px;
background: rgba(0, 0, 0, 0.0470588) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgba(0, 0, 0, 0.870588);
font: normal normal normal normal 14px / 21px "Ubuntu Mono", "Courier New", Courier, monospace;
margin: 21px -24px 0px;
outline: rgba(0, 0, 0, 0.870588) none 0px;
overflow: auto;
padding: 21px 24px;
}
/*#PRE_11*/
#CODE_12 {
box-sizing: border-box;
color: rgba(0, 0, 0, 0.8);
display: block;
height: 36px;
text-size-adjust: 100%;
white-space: pre;
width: 651px;
column-rule-color: rgba(0, 0, 0, 0.8);
perspective-origin: 325.5px 18px;
transform-origin: 325.5px 18px;
background: rgb(238, 238, 238) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgba(0, 0, 0, 0.8);
font: normal normal normal normal 14px / 21px "Ubuntu Mono", "Courier New", Courier, monospace;
outline: rgba(0, 0, 0, 0.8) none 0px;
overflow: auto;
}
/*#CODE_12*/
#P_15 {
box-sizing: border-box;
color: rgba(0, 0, 0, 0.870588);
height: 23px;
text-size-adjust: 100%;
width: 651px;
column-rule-color: rgba(0, 0, 0, 0.870588);
perspective-origin: 325.5px 11.5px;
transform-origin: 325.5px 11.5px;
border: 0px none rgba(0, 0, 0, 0.870588);
font: normal normal normal normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
margin: 21px 0px 0px;
outline: rgba(0, 0, 0, 0.870588) none 0px;
}
/*#P_15*/
#ASIDE_16 {
box-sizing: border-box;
color: rgba(0, 0, 0, 0.541176);
height: 23px;
text-size-adjust: 100%;
width: 651px;
column-rule-color: rgba(0, 0, 0, 0.541176);
perspective-origin: 325.5px 11.5px;
transform-origin: 325.5px 11.5px;
border: 0px none rgba(0, 0, 0, 0.541176);
font: normal normal normal normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
margin: 21px 0px 64px;
outline: rgba(0, 0, 0, 0.541176) none 0px;
}
/*#ASIDE_16*/
#A_17, #A_18 {
box-sizing: border-box;
color: rgb(232, 78, 64);
text-decoration: none;
text-size-adjust: 100%;
column-rule-color: rgb(232, 78, 64);
border-top: 0px none rgb(232, 78, 64);
border-right: 0px none rgb(232, 78, 64);
border-bottom: 1px dotted rgb(232, 78, 64);
border-left: 0px none rgb(232, 78, 64);
font: normal normal normal normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
outline: rgb(232, 78, 64) none 0px;
transition: color 0.25s ease 0s;
}
/*#A_17, #A_18*/
#FOOTER_19 {
bottom: 0px;
box-sizing: border-box;
color: rgb(255, 255, 255);
height: 96px;
left: 0px;
position: absolute;
right: 0px;
text-size-adjust: 100%;
top: 867px;
width: 961px;
z-index: 4;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 480.5px 48px;
transform-origin: 480.5px 48px;
background: rgb(232, 78, 64) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(255, 255, 255);
font: normal normal normal normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
padding: 0px 8px;
}
/*#FOOTER_19*/
#NAV_20 {
box-sizing: border-box;
color: rgb(255, 255, 255);
height: 96px;
max-width: 1184px;
text-size-adjust: 100%;
width: 945px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 472.5px 48px;
transform-origin: 472.5px 48px;
border: 0px none rgb(255, 255, 255);
font: normal normal normal normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
overflow: hidden;
padding: 8px 0px;
}
/*#NAV_20*/
#DIV_21 {
bottom: 0px;
box-sizing: border-box;
color: rgb(255, 255, 255);
float: left;
height: 80px;
left: 0px;
position: relative;
right: 0px;
text-size-adjust: 100%;
top: 0px;
width: 472.5px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 236.25px 40px;
transform-origin: 236.25px 40px;
border: 0px none rgb(255, 255, 255);
font: normal normal normal normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}
/*#DIV_21*/
#DIV_22 {
bottom: 0px;
box-sizing: border-box;
color: rgb(255, 255, 255);
float: left;
height: 80px;
left: 0px;
position: relative;
right: 0px;
text-align: right;
text-size-adjust: 100%;
top: 0px;
width: 472.5px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 236.25px 40px;
transform-origin: 236.25px 40px;
border: 0px none rgb(255, 255, 255);
font: normal normal normal normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}
/*#DIV_22*/
#A_23 {
box-sizing: border-box;
color: rgb(232, 78, 64);
display: block;
height: 80px;
text-align: right;
text-decoration: none;
text-size-adjust: 100%;
width: 472.5px;
column-rule-color: rgb(232, 78, 64);
perspective-origin: 236.25px 40px;
transform-origin: 236.25px 40px;
border: 0px none rgb(232, 78, 64);
font: normal normal normal normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
outline: rgb(232, 78, 64) none 0px;
transition: color 0.25s ease 0s;
}
/*#A_23*/
#SPAN_24 {
bottom: 40px;
box-sizing: border-box;
color: rgba(255, 255, 255, 0.701961);
display: block;
height: 20px;
left: 0px;
position: absolute;
right: 0px;
text-align: right;
text-size-adjust: 100%;
top: 20px;
width: 472.5px;
column-rule-color: rgba(255, 255, 255, 0.701961);
perspective-origin: 236.25px 10px;
transform-origin: 236.25px 10px;
border: 0px none rgba(255, 255, 255, 0.701961);
font: normal normal normal normal 15px / 20px Ubuntu, Helvetica, Arial, sans-serif;
outline: rgba(255, 255, 255, 0.701961) none 0px;
padding: 0px 56px;
}
/*#SPAN_24*/
#DIV_25 {
bottom: 4px;
box-sizing: border-box;
color: rgb(232, 78, 64);
display: table;
height: 48px;
left: 0px;
position: absolute;
right: 0.5px;
text-align: right;
text-size-adjust: 100%;
top: 28px;
width: 472px;
column-rule-color: rgb(232, 78, 64);
perspective-origin: 236px 24px;
transform-origin: 236px 24px;
border: 0px none rgb(232, 78, 64);
font: normal normal normal normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
outline: rgb(232, 78, 64) none 0px;
}
/*#DIV_25*/
#DIV_26 {
box-sizing: border-box;
color: rgb(232, 78, 64);
display: table;
height: 47px;
table-layout: fixed;
text-align: right;
text-size-adjust: 100%;
width: 424px;
column-rule-color: rgb(232, 78, 64);
perspective-origin: 212px 23.5px;
transform-origin: 212px 23.5px;
border: 0px none rgb(232, 78, 64);
font: normal normal normal normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
outline: rgb(232, 78, 64) none 0px;
padding: 0px 8px;
}
/*#DIV_26*/
#DIV_27 {
box-sizing: border-box;
color: rgb(255, 255, 255);
display: table-cell;
height: 47px;
text-align: right;
text-size-adjust: 100%;
text-overflow: ellipsis;
white-space: nowrap;
width: 408px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 204px 23.5px;
transform-origin: 204px 23.5px;
border: 0px none rgb(255, 255, 255);
font: normal normal normal normal 18px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
overflow: hidden;
padding: 11px 0px 13px;
}
/*#DIV_27*/
#DIV_28 {
box-sizing: border-box;
color: rgb(255, 255, 255);
display: table-cell;
height: 48px;
text-align: right;
text-size-adjust: 100%;
vertical-align: top;
width: 48px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 24px 24px;
transform-origin: 24px 24px;
border: 0px none rgb(255, 255, 255);
font: normal normal normal normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}
/*#DIV_28*/
#I_29 {
box-sizing: border-box;
color: rgb(255, 255, 255);
display: inline-block;
height: 40px;
speak: none;
text-align: right;
text-size-adjust: 100%;
width: 40px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 20px 20px;
transform-origin: 20px 20px;
border: 0px none rgb(255, 255, 255);
border-radius: 100% 100% 100% 100%;
font: normal normal normal normal 24px / 24px Icon;
margin: 4px;
outline: rgb(255, 255, 255) none 0px;
padding: 8px;
transition: background 0.25s ease 0s;
}
/*#I_29*/
#I_29:before {
box-sizing: border-box;
color: rgb(255, 255, 255);
content: '""';
speak: none;
text-align: right;
text-size-adjust: 100%;
column-rule-color: rgb(255, 255, 255);
border: 0px none rgb(255, 255, 255);
font: normal normal normal normal 24px / 24px Icon;
outline: rgb(255, 255, 255) none 0px;
}
/*#I_29:before*/
This is causing your problem.
.article h2 {
padding-top: 100px;
margin-top: -64px;
}
Your H2 tag is overlapping the horizontal bar. So you should balance these numbers, I would do:
.article h2 {
padding-top: 36px;
margin-top: 0px;
}
Seems not affect your design. And respecting the previous proportion.
Make sure to change also your #media areas too.
EDIT: How I've discovered the problem, using the devTools. I realized the size of your h2 was overlapping.