We Keep Coding

images moves when resiging the window when using display

this is my sass and html code.
i would like to know why my caroulsel images moves to left when i resize the window can anyone help me ? i have search multiple stackoverflow but couldnt find the answer for it.
somehow the image doesnt resize acordingly and moves to left . i would like to know how can i keep the image on the same position when reisizng the window.
.carousel-wrapper {
position: relative;
// margin: auto;
border: 4px solid red;
overflow: hidden;
//ul
.facebook_album_list {
display: flex;
.album_list_item {
min-width: 100%;
a {
img {
width: 100%;
aspect-ratio: 16/9;
max-height: 300px;
}
}
}
}
.carousel_button {
position: absolute;
z-index: 2;
height: 100%;
cursor: pointer;
display: grid;
justify-content: center;
align-items: center;
color: rgb(255, 255, 255);
&:hover {
.fa-solid {
transform: scale(1.2);
}
}
.fa-solid {
font-size: 1rem;
padding: 1rem;
border-radius: 50%;
transform: scale(1);
background-color: rgb(212, 88, 0);
}
}
#previousbtn {
left: 0;
}
#nextbtn {
right: 0;
}
}
<div class="carousel-wrapper" aria-label="Photo gallery" data-carousel>
<ul class="facebook_album_list album_list" data-carousel-list>
<li class="album_list_item slide_item" data-carousel-list-item>
<a href="">
<img class="album_list_item_img" data-carousel-img src="" loading="lazy">
</a>
</li>
<li class="album_list_item slide_item" data-carousel-list-item>
<a href="">
<img class="album_list_item_img" data-carousel-img src="" loading="lazy">
</a>
</li>
<li class="album_list_item slide_item" data-carousel-list-item>
<a href="">
<img class="album_list_item_img" data-carousel-img src="" loading="lazy">
</a>
</li>
</ul>
</div>

Link being block from getting clicked on Radial menu

I am making an expanding radial member with Javascript. There are image buttons on the menu which expands out of a center image which is clicked to expand the menu. My problem is that the button images are not clickable because the center button's image is covering them.
var i=0;
function expand(){
if(i==0){
document.getElementById("menu").style.transform="scale(3)";
document.getElementById("plus").style.transform="rotate(45deg)";
i=1;
}
else{ document.getElementById("menu").style.transform="scale(0)";
document.getElementById("plus").style.transform="rotate(0deg)";
i=0;
}
}
body{
background-color: #303358;
padding: 0px;
margin: 0px;
overflow: hidden;
}
.toggle {
background-color: #303358;
text-align: center;
height: 100px;
width: 100px;
border-radius: 50%;
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.fa-plus{
height: 100%;
width:auto;
display: block;
transition: 0.7s;
}
.menu {
background-color: #000123;
height: 100px;
width: 100px;
transform: scale(0);
border-radius: 50%;
border-style: double;
border-color: #C8C8C8;
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: -1;
transition: 0.7s;
}
a {
display: inline-block;
position: absolute;
font-size: 15px;
color: #C8C8C8;
}
a:nth-child(1){
top: 6px;
left: 45px;
}
a:nth-child(2){
top: 24px;
left: 77px;
}
a:nth-child(3){
top: 58px;
left: 76px;
}
a:nth-child(4){
top: 78px;
left: 42px;
}
a:nth-child(5){
top: 58px;
left: 10px;
}
a:nth-child(6){
top: 23px;
left: 12px;
}
a:hover {
color: #989898;
}
<div class="toggle" id="toggle" onclick="menu-expand()">
<img src="CTicon.png" id="plus" class="fa fa-plus">
</div>
<div class="menu" id="menu">
<a href="https://www.google.com/">
<img src="bepis.png" style="height:20%;" class="fa fa-private">
</a>
<a href="https://www.google.com/">
<img src="bepis.png" style="height:20%;" class="fa fa-public" >
</a>
<a href="https://www.google.com/">
<img src="bepis.png" style="height:20%;" class="fa fa-public2"></i>
</a>
<a href="https://www.google.com/">
<img src="bepis.png" style="height:20%;" class="fa fa-public3"></i>
</a>
<a href="https://www.google.com/">
<img src="bepis.png" style="height:20%;" class="fa fa-public4"></i>
</a>
<a href="https://www.google.com/">
<img src="bepis.png" style="height:20%;" class="fa fa-public5"></i>
</a>
</div>
The reason I've made a new question is because in most answers I found people suggest just adding a pointer-events: none; tag to my center expanding button, but I can't do this because it is also a button. To fix this I've tried using JS to change it, aswell as I have tried using pointer-events: none;. The only fix I have found so far is just changing the z-index of toggle, the issue with this is that the center button then my comes invisible when the menu expands because its placed below the menu itself which i would like to avoid.
Edit: Well now I'm more confused because the freakin thing works in the code snippet on here haha.

So once the code snippet worked on here I realized it must be something outside of the menu itself overlaying the buttons so I put the toggle button to z-index 2 and the menu to 1 and got it all working.

Javascript lightbox won't function inside a html section tag

Above is with section tag and below is withoutI need to have the lightbox inside the section tag. Just not sure as to why this is happening or how to override this. The lightbox is appearing but it will not close and is behind the image. Here is the code:
<section id="XXX">
<div id="light" class="white_content">This is the lightbox content. Close</div>
<div id="fade" class="black_overlay"></div>
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img src="Image.jpg" alt="Image" height="256" width="300">
</a>
</section>
Nothing In the CSS indicates that there's an issue there...
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
Thanks.

The console reads:
Uncaught TypeError: Cannot read property 'style' of null
Looking at your code
getElementById(' fade').
^^
Learn to use the developer console so you can find these typos.
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index: 1002;
overflow: auto;
}
<section id="XXX">
<div id="light" class="white_content">This is the lightbox content. Close
</div>
<div id="fade" class="black_overlay"></div>
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img src="Image.jpg" alt="Image" height="256" width="300">
</a>
</section>

How to slideToggle() on hover?

I'm pretty new with jQuery, and I'm doing fine with basics, but still can't figure out some things with advance use.
This is my example
jQuery('.hp-single-service a').hover(function() {
jQuery('.above-content').slideToggle("slow", function() {
jQuery('.above-content').css({
"height": "20%",
"bottom": "0"
});
jQuery('.above-content-inner').css("padding-top", "2%");
});
});
.hp-single-service {
float: left;
width: 50%;
height: 388px;
border: 4px solid #f3a12b;
overflow: hidden;
position: relative;
border-bottom: 0;
}
.above-content {
position: absolute;
z-index: 1;
left: 0;
right: 0;
background-color: #73214a;
opacity: 0.9;
filter: alpha(opacity=90);
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hp-single-service order-number-1">
<a href="#">
<div class="above-content order-number-1">
<div class="above-content-inner">
<span class="service-title">Service title</span>
<span class="service-category">Service category</span>
</div>
</div>
<img width="954" height="568" src="image-source.jpg" class="attachment-original" alt="Image1">
</a>
</div>
I'm trying to create jQuery that will on hover toggle .above-content div to height:20%; bottom:0; and give padding-top:2%; to .above-content-inner div.
For start I'm not sure that slideToggle() is right function for this, so if anyone have better suggestion I'm open for it, just to make this work.

You can even do the same with CSS 3 transitions. Please refer to the following link https://jsfiddle.net/osha90/4kyLgat1/
<div class="hp-single-service order-number-1">
<a href="#">
<div class="above-content order-number-1">
<div class="above-content-inner">
<span class="service-title">Service title</span>
<span class="service-category">Service category</span>
</div>
</div>
<img width="954" height="568" src="image-source.jpg" class="attachment-original" alt="Image1">
</a>
</div>
CSS CODE
.hp-single-service {
float: left;
width: 50%;
height: 388px;
border: 4px solid #f3a12b;
overflow: hidden;
position: relative;
border-bottom: 0;
}
.above-content {
position: absolute;
z-index: 1;
left: 0;
right: 0;
background-color: #73214a;
opacity: 0.9;
filter: alpha(opacity=90);
height: 100%;
width: 100%;
bottom: 0%;
transition: all 1s ease-out;
}
.hp-single-service a:hover .above-content{
height: 20%;
bottom: 0%;
}
.hp-single-service a:hover .above-content-inner{
padding-top: 2%;
transition: all 1s ease-out;
}

I believe you're looking for something like this:
jQuery('.hp-single-service a').hover(function() {
jQuery(this).find('.above-content').animate({
"height": "20%",
"bottom": "0"
});
jQuery(this).find('.above-content-inner').css("padding-top", "2%");
},
function() {
jQuery(this).find('.above-content').animate({
"height": "100%",
"bottom": "auto"
});
jQuery(this).find('.above-content-inner').css("padding-top", "0");
});
.hp-single-service {
float: left;
width: 50%;
height: 388px;
border: 4px solid #f3a12b;
overflow: hidden;
position: relative;
border-bottom: 0;
}
.above-content {
position: absolute;
z-index: 1;
left: 0;
right: 0;
background-color: #73214a;
opacity: 0.9;
filter: alpha(opacity=90);
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hp-single-service order-number-1">
<a href="#">
<div class="above-content order-number-1">
<div class="above-content-inner">
<span class="service-title">Service title</span>
<span class="service-category">Service category</span>
</div>
</div>
<img width="954" height="568" src="image-source.jpg" class="attachment-original" alt="Image1">
</a>
</div>
<div class="hp-single-service order-number-1">
<a href="#">
<div class="above-content order-number-1">
<div class="above-content-inner">
<span class="service-title">Service title</span>
<span class="service-category">Service category</span>
</div>
</div>
<img width="954" height="568" src="image-source.jpg" class="attachment-original" alt="Image1">
</a>
</div>
Don't forget that .hover() takes two callback functions as parameters - the first one is the mouseover and the second one is the mouseout.

How can I center a div with a fixed width so that it scrolls horizontally and stays centered responsively when the div is wider than the browser?

I have this working the way I want it to, except that I need it to stay centered, so that the green rectangle is in the center of the browser (until the user scrolls) when the browser width is between 835px - 320px.
I'd like to get this figured out with CSS, but I'm not opposed to a JavaScript solution.
I'm pretty new to posting questions on stackoverflow, so I apologize in advance if I'm not clear enough or if I've provided too much or not enough information.
Thank you in advance.
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.bottles-container-mobile .container-fluid {
overflow: auto;
background: #ccc;
}
.product_map_image_mobile {
width: 835px;
height: 359px;
overflow: auto;
overflow-y: hidden;
margin: 0 auto;
white-space: nowrap;
position: relative;
}
.product_map_image_mobile .product_map_link_mobile {
display: inline-block;
position: absolute;
text-indent: -999em;
overflow: hidden;
}
.product_map_image_mobile #product_map_link_mobile_0 {
width: 77px;
height: 193px;
top: 117px;
left: 20px;
background:blue;
}
.product_map_image_mobile #product_map_link_mobile_1 {
width: 88px;
height: 202px;
top: 113px;
left: 97px;
background:red;
}
.product_map_image_mobile #product_map_link_mobile_2 {
width: 91px;
height: 213px;
top: 106px;
left: 187px;
background:orange
}
.product_map_image_mobile #product_map_link_mobile_3 {
width: 89px;
height: 218px;
top: 104px;
left: 279px;
background:purple;
}
.product_map_image_mobile #product_map_link_mobile_4 {
width: 100px;
height: 233px;
top: 94px;
left: 369px;
background:green;
}
.product_map_image_mobile #product_map_link_mobile_5 {
width: 91px;
height: 219px;
top: 104px;
left: 470px;
background:orange;
}
.product_map_image_mobile #product_map_link_mobile_6 {
width: 86px;
height: 216px;
top: 104px;
left: 562px;
background:purple;
}
.product_map_image_mobile #product_map_link_mobile_7 {
width: 91px;
height: 211px;
top: 106px;
left: 649px;
background:gray;
}
.product_map_image_mobile #product_map_link_mobile_8 {
width: 79px;
height: 194px;
top: 117px;
left: 740px;
background:blue;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="bottles-container-mobile">
<div class="container-fluid">
<div class="row-fluid">
<div class="product-solutions-green-bar-mobile">
<div class="product_map_image_mobile">
<a class="product_map_link_mobile" id="product_map_link_mobile_0" title="" href="#"></a>
<a class="product_map_link_mobile" id="product_map_link_mobile_1" title="" href="#"></a>
<a class="product_map_link_mobile" id="product_map_link_mobile_2" title="" href="#"></a>
<a class="product_map_link_mobile" id="product_map_link_mobile_3" title="" href="#"></a>
<a class="product_map_link_mobile" id="product_map_link_mobile_4" title="" href="#"></a>
<a class="product_map_link_mobile" id="product_map_link_mobile_5" title="" href="#"></a>
<a class="product_map_link_mobile" id="product_map_link_mobile_6" title="" href="#"></a>
<a class="product_map_link_mobile" id="product_map_link_mobile_7" title="" href="#"></a>
<a class="product_map_link_mobile" id="product_map_link_mobile_8" title="" href="#"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

You can do that:
#media screen and(max-width:835px) and (min-width:320px) {
.product_map_image_mobile {
width: new_widthpx;
}
}