remove justify-content: center; from #box
Solution 1 :
Solution 2 :
I have removed 2 rows in the style of box:
#box{
padding: 20px;
/* width: 100%; */ this one
display: flex;
flex-direction: row;
align-items: center;
/* justify-content: center; */ this one
overflow-x: auto;
position: sticky;
position: -webkit-sticky;
top: 0;
}
It works for me
Solution 3 :
Remove your justify-content: center. Also add an box-sizing property so you can fully scroll:
html {
box-sizing: border-box;
}
Its very common to remove the default padding and margin from the browser and adding box-sizing overall:
Usually we put this at the top of the CSS:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
Problem :
I am making a sticky navbar which has circlular avatars, each with an alphabet A-Z, a total of 26 circles. When it is on full screen, it works fine. But when I switch to smaller screen view, the scroll doesnt let me traverse initial values.
As visible, the scroll doesnt scroll past ‘J’ to the left and thus I can’t see values A-I
Here is the code.
let box = document.getElementById('box')
let circles = ""
for(let i=65;i<91;i++)
circles+=`<a href=#><div class="circle" onclick="print('${String.fromCharCode(i)}')"><span class="inner">${String.fromCharCode(i)}</span></div></a>`
box.innerHTML = circles
function print(value) {
console.log(value)
} html{font-family: 'Comfortaa', cursive;}
a{text-decoration: none;outline: none;}
#box{
padding: 20px;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
overflow-x: auto;
position: sticky;
position: -webkit-sticky;
top: 0;
}
.circle{
min-height: 50px;
min-width: 50px;
border-radius: 50px;
background-color: #f9dbbd;
margin-left: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.inner{
color: #450920;
font-weight: 700;
}
<html>
<body>
<div style="height: 1300px;background-color: red;"></div>
<div id="box"></div>
<div style="height: 1300px;background-color: red;"></div>
<div style="height: 1300px;background-color: green;"></div>
</body>
</html>Thanks for your time!
Comments
Comment posted by Ahmad Shahbaz
Please use the embedded code snippet tool, to help explain what this code does and does not yet do. And what you what you want it to do
Comment posted by Lakshay Dutta
works! Can you explain why this works after removing justify-content:center ??
Comment posted by Karl L
@LakshayDutta, it centers the children along the line, and makes this as the default/starting position, so in smaller view, that center part is somewhere around letter j or k