After designing my profile page, I encountered a problem related to horizontal scrolling caused by overflow. Despite trying various solutions like adjusting the width of .profilePg, I haven't been able to resolve this issue without disrupting the overall layout. Can anyone offer advice on how to prevent overflow and stop horizontal scrolling?
Access the code via this link: https://jsfiddle.net/
Utilize the calc function to set the width, especially when applying margin-left on .leftProfileDiv
.leftProfileDiv {
/* display: inline-block; */
/* background-color: darkblue; */
/* margin-top: 25px; */
margin-left: 30px;
/* vertical-align: top; */
width: calc(100% - 30px);
height: 40%;
/* text-align: center; */
}
.profilePg {
background-color: grey;
margin-left: 222px;
/* width: 85%; */
height: 100%;
text-align: center;
/* margin-left: auto; */
}
.topProfDiv {
/* background-color: lightblue; */
text-align: left;
/* margin-top: 30px; */
/* margin-right: auto;
margin-left: auto; */
/* text-align: center; */
background-color: #2E2E2E;
/* border-radius: 27px; */
/* display: inline-block; */
width: 100%;
height: 400px;
font-size: 12px;
font-weight: 600;
border-bottom: 1px solid black;
/* vertical-align: top; */
/* display: inline-grid; */
}
/* .leftProfileDiv, .bannerDiv { */
/* background-color: black; */
/* display: inline-block; */
/* margin-top: 11px; */
/* height: 90%; */
/* } */
.leftProfileDiv {
/* display: inline-block; */
/* background-color: darkblue; */
/* margin-top: 25px; */
margin-left: 30px;
/* vertical-align: top; */
width: calc(100% - 30px);
height: 40%;
/* text-align: center; */
}
.leftProfileDiv p {
display: inline-block;
/* margin-top: 50px; */
margin-left: 25px;
/* margin-top: 40px; */
color: grey;
cursor: pointer;
}
.leftProfileDiv h2 {
/* background: grey; */
/* width: 90%; */
font-size: 18px;
margin: 0px;
margin-top: 50px;
margin-left: 25px;
display: inline-block;
vertical-align: middle;
}
/* .leftProfileDiv h3 {
margin: 0px;
margin-top: 50px;
display: inline-block;
} */
/* .leftProfileDiv h4 {
display: inline-block;
} */
.profileInfoDiv {
display: inline-block;
width: 50%;
height: 100%;
/* background: lightblue; */
/* margin: 0px; */
vertical-align: middle;
}
.profileInfoDiv h4 {
margin-left: 25px;
}
/* #profStats {
color: #A0A0A0;
font: Arial;
font-family: sans-serif;
font-size: 18;
}
#numberSubs {
color: #A0A0A0;
font: Arial;
font-family: sans-serif;
font-weight: 600;
} */
#profileStats {
margin-left: 10px;
color: #A0A0A0;
font-size: 14px;
}
#profileCaption {
font-size: 15px;
font-weight: 500;
color: #CCCCCC;
/* white */
}
#seperator {
font-size: 25px;
/* color: #CCCCCC; */
}
/* #numberSubs {
color: white;
font-weight: 600;
} */
#profileSubscribeBtn {
color: white;
font-size: 17px;
font-weight: 600;
width: 200px;
height: 55px;
background-color: #4549F1;
border-radius: 30px;
border: none;
cursor: pointer;
/* margin-left: 25%; */
/* 68px; */
/* margin-right: 10px; */
position: absolute; /*or fixed*/
right: 30px;
margin-top: 50px;
}
/* #profileSubscribeBtn:active {
background-color: #4549F1;
} */
.leftProfileDiv img {
display: inline-block;
vertical-align: middle;
/* margin-top: 50px; */
width: 100px;
height: 100px;
border: 1.5px solid transparent;
border-radius: 50px;
}
/* .leftProfileDiv img:hover {
border: solid #4152F1 1.5px;
} */
/* .profileContentDiv {
width: 100%;
} */
#profileUsername {
cursor: default;
color: white;
}
.bannerDiv {
/* margin-top: 12px; */
/* margin-left: 15px; */
width: 100%;
height: 60%;
/* border-radius: 17px; */
cursor: default;
}
.banner {
/* background-color: blue; */
background-image: url('../images/profileImage.png');
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
/* border-radius: 17px; */
}<div class="topProfDiv">
<div class="bannerDiv">
<!-- <img src="images/testImg.png"> -->
<div onclick='pickFile()' id="banner" class="banner"><input style='display: none;' type="file" id="fileButton" value="upload"/></div>
</div>
<div class="leftProfileDiv">
<img id="profImage" src="images/defaultProfImg.png">
<div class="profileInfoDiv">
<h2 id="profileUsername">username</h2>
<h2 id="profileStats">200 Subscribers</h2>
<!-- <h2 id="profileStats"><a id="seperator">|</a> 200 Subscribers</h2> -->
<h4 id="profileCaption">This user is yet to add a bio...</h4>
<!-- <p id="signout">Sign out</p> -->
</div>
<button id="profileSubscribeBtn">Subscribe</button>
<!-- <p id="signout">Sign out</p> -->
</div>
<!-- <div class="bannerDiv">
<div onclick='pickFile()' id="banner" class="banner"><input style='display: none;' type="file" id="fileButton" value="upload"/></div>
</div> -->
</div>I've reviewed all the answers on this topic, but I'm still struggling to find the correct method for sanitizing data. My task is to enter: <?php echo 'yes'; ?> <?php echo 'yes' ?> into a text area, submit it in ...
I have a collection of elements that I need to selectively display on a webpage. To achieve this, I am utilizing the following code snippet: [style.display]="!student.selected?'none':'block'" However, upon inspecting the element, a ...
I need help figuring out how to arrange this. Here's an example link: http://jsfiddle.net/VBS4E/25/ Is there a way to position the input field directly below the button? Like this: ________ __________ __________ | Btn#1 | | Btn#2 | | Btn# ...
I am experiencing an issue where I can successfully insert values into the database based on what is checked, but I am encountering difficulty retrieving the values when fetching from the database. Can anyone provide me with some assistance? Thank you. Th ...
I'm currently working on a project and I've hit a roadblock while trying to fetch profile information for the logged-in account using a token. Despite using the JWT-decoding library, I keep encountering the issue where jwt_decode is not defined. ...
I have been attempting to incorporate Twitter bootstrap into my django application. Within settings.py, I have set up the following: STATIC_URL = '/static/' # Additional locations of static files STATICFILES_DIRS = ( # Add paths for static ...
I have successfully implemented a feature where clicking the "add to my stay" button displays the name and price data. Subsequently, it automatically changes to a remove button when clicked again for another addon. If I press the remove button of the first ...
Initially, the original script worked perfectly with just one class being added: function check_btn_charge() { if (parseInt(jQuery(".total-change-price").text()) >= 0) { jQuery(".btn-action-save-charge"+" "+"btn-danger" ...
Is there a way to make the background image appear when hovering over the original image and disappear when no longer hovering? Below is a snippet of my HTML and CSS. Is there a straightforward CSS command to hide the original image or show the background ...
Currently, I am working on building a to-do list application using React. In the CSS styling, I have implemented an animation for when an li element is active, causing it to expand in height. The issue arises from the fact that I have also set up an onClic ...
After making changes to the contenteditable area and clicking off, nothing happens. This is because the function it's trying to send data to has not been created yet, so an 'failure' alert should appear. Similar code has worked fine for me i ...
I created two popup windows. One is used to ask the user whether they want to submit the form, and if they click 'yes', the form is submitted. The issue I encountered is that the other popup window should be shown after the form is successfully s ...
<a draggable="true" class="user" id="leonardo" ondragstart="dragUser(this, event)" aria-selected="undefined"> IPD</a> If I want the button to navigate to the next page when dragged, what code should I write? ...
I am trying to use the unique font called lobster. After downloading the lobster.woff2 file, I stored it in the font folder. In my custom CSS, I added the following: @font-face { font-family: 'Lobster'; font-style: normal; font-weight: 40 ...
Is there a method to implement Materialize CSS input elements that include placeholders and icons without directly using the Materialize CSS framework? I prefer not to mix frameworks in order to avoid potential conflicts, as I am already utilizing anothe ...
The issue I am experiencing with my blog is that the dropdown menu is appearing behind the image slider on the main page. You can see it here: Can anyone offer guidance on how to prevent this from happening so that the dropdown menu is not obscured? Just ...
Following up on the previous question posted here: Sorting divs alphabetically in its own parent (due to many lists) I have successfully sorted the lists alphabetically, but now I need to ensure that a specific div with a green background (class: last) al ...
What is the best way to vertically center a button within a div? Click here for an image of the issue I recently started learning HTML & CSS and I am struggling to align a button in the vertical center of a div. Text-align:center doesn't seem to be ...
[Update: The solution involved creating two containers, with the second animation container configured to have left: 100%.] I designed a simple animation that moves a large gif image across the page horizontally, where the width of the gif is 1536px. Sin ...
Hey there, I am interested in creating small colored boxes to represent different meanings for each color. I came across this code snippet but I am unsure how to adjust the size: <div class="p-3 mb-2 bg-primary text-white">.bg-primary</d ...