My goal is to design a responsive layout, but I'm facing an issue where the body content extends beyond the layout when the width goes below 250px. While having responsiveness down to 320px might seem sufficient, it can still make the webpage look unprofessional. Any expert advice on how to tackle this problem? [![enter image description here][1]][1] [1]: https://i.sstatic.net/NjMWV.png ...
One issue here is that the .card class has a min-width: 14.8rem, causing it to be larger than the body at a certain point. Removing the absolute min-width can resolve this issue.
Updated code:
function toggleMobileMenu(menu) {
menu.classList.toggle('open');
}
function toggleSidebar(menu) {
menu.classList.toggle('open');
}html {
height: 100%;
box-sizing: border-box;
}
*,
*:after,
*:before {
box-sizing: inherit;
}
body {
position: relative;
min-height: 100%;
min-width: 100%;
box-sizing: border-box;
margin: 0;
padding-bottom: 12rem;
font-family: 'Roboto', sans-serif !important;
background: #f2f2f2;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.body-content {
padding-bottom: 0.5rem;
width: 100%;
}
/*Main ends here*/
/*Global*/
h2 {
color: #007bff;
font-size: 20px;
}
li,
a {
list-style: none;
text-decoration: none;
}
.button {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
color: #fff;
}
/*Global*/
header {
padding: 0 20px;
background: #007991;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #78ffd6, #007991);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #78ffd6, #007991);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
height: 50px;
width: 100%;
min-width: 100%;
display: flex;
justify-content: space-between;
z-index: 1001;
position: -moz-sticky;
position: -webkit-sticky;
position: sticky;
top: 0;
}
.logo {
width: 30px;
height: 30px;
justify-self: start;
margin: 10px 20px;
cursor: pointer;
}
header nav {
overflow: hidden;
margin-right: auto;
}
header nav ul {
list-style: none;
}
header nav ul li {
display: inline-block;
padding-left: 20px;
}
.active a {
color: #fff;
}
header nav ul li:hover {
transform: scale(1.1);
transition: all 0.3s ease 0s;
}
header nav ul li a {
color: #f2f3f5;
padding: 10px;
...
@media(max-width: 281px) {
.wrapper .blog-container {
padding-right: 0;
}
.blog-container .blog-cards {
grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
}
.widgets {
grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
}
}To fix the problem, the min-width in line 601 of your CSS file should be changed to 100% instead of an absolute value.
I am struggling to find a way to click on a button labeled "Alles akzeptieren" in order to accept the cookies on this website. On other sites, I have successfully used an ID or name attribute to locate and interact with buttons, but on this particular site ...
As someone with limited CSS/HTML skills and a preference for backend development, I decided to use a pre-made template. The default login page looks like this: https://i.sstatic.net/XKBAZ.png In the register-page that I customized based on the login pa ...
I'm working on an MVC 4 application that utilizes jQuery Mobile. I have my own .JS file where all the functionality is stored. However, when I navigate to a specific view and check the page source, I notice that all scripts files are loaded except fo ...
Check out my custom checkbox on Fiddle: http://jsfiddle.net/V98W8/ The checkbox works perfectly in Chrome, but displays broken in Firefox and IE. I've attempted to add custom prefixes and other solutions, but the issue persists. #milestone-table in ...
I currently have a main menu in the header with links, accompanied by a moving triangle that changes position as the user hovers from one page to another. While I want to maintain the dynamic movement, I am seeking a smoother transition effect similar to w ...
Struggling with an unfamiliar problem here. Everything functions well when using regular HTML code, but the navigation bar appears abnormal when utilizing a php-echo. The desired look of the bar (with normal HTML CODE): However, with php-echo it resembl ...
Recently, I have been experimenting with CSS to blur NSFW images in a chatroom until they are hovered over. I have successfully accomplished this task and now my next goal is to implement checkboxes that can toggle the display of these images. I am aware o ...
Utilizing the code provided below to showcase an OpenLayers map within a DIV container presents a peculiar issue. Upon initial load of the webpage, the map does not display consistently - requiring multiple page refreshes in order for it to become visible. ...
Greetings, I'm encountering a peculiar issue in my recent Django project. Currently, I am experimenting with the NameForm example provided in the Django Documentation on Working with Forms. On the surface, it appears to be a straightforward exercise. ...
Looking for a way to transform a navigation item into a search bar upon clicking, and revert back to its original state when the user clicks elsewhere. The morphing aspect is working correctly but I'm having trouble using 'blur' to trigger t ...
I am working on a preload page that includes an animation. <body onload="showSpinner()"> <h3>Please Wait...</h3> <script> function showSpinner() { showProgress(); window.loc ...
Whenever I try to add padding to an element, it ends up losing its responsiveness when the window is resized. I am using Reactjs with React-bootstrap, and I believe the issue lies in the way I am setting the padding on the element. Interestingly, when I re ...
I'm curious to know if adding a tracking pixel (a transparent GIF with server logging) as a background-image in a linked stylesheet will have the same impact as if it were a regular <img> on a webpage. After conducting a quick test using Chrome ...
I am struggling to position a small close image within a div without success. The goal is for the image to always appear on the left side of the div, regardless of the content. The content consists of a text label with a maximum length of 8 characters. Iss ...
I've encountered an issue with a textarea element in a form. After clicking on a button to show the form (which includes dynamic HTML), I can see the textarea element with all its styles applied. However, when I try to type in the textarea on iOS Saf ...
Can anyone help me with my issue regarding Bootstrap scrollspy settings? It seems to be highlighting the wrong div id, always the last one. Here is the code snippet: Content: <body style="heigt: 100%" data-spy="scroll" data-target="#side-menu"> ...
Our angular-built single page app features a drag-and-drop interface for code snippets, each with its own unique styles separate from the main Bootstrap-themed admin panel. However, due to the differences in styling, navigating to the drag-and-drop sectio ...
I am encountering an issue on my website where there are too many redirects occurring when attempting to submit a form that is supposed to be sent via email. The connection between the form and email seems to be correct. Form Code: <section class=" ...
I'm a beginner in the world of design and Bootstrap, so please be patient with me. My goal is to create a series of cards that have equal height and width (responsive, not fixed) in each row. In other words, I want all the cards to be as tall and wid ...
I am currently in the learning stages of AngularJS and am working on a personal project that involves fetching JSON data and displaying it on an HTML page using AngularJS. The main objective is to have two columns, "rules" and "servername", with checkbox i ...