When the page is displayed on PC or tablet width it works perfectly. When on phone the body leaves empty space on the right. It isn't margin, or padding. I have tried width: 100% and width: 100vw.
Although the #media part doesn't help too much. I'm using flexbox to position everything, the viewport is activated and I have tried using position absolute / fixed on the body, but nothing works.
#media (max-width: 576px) {
body {
width: 100%;
}
main {
width: 100%;
}
header {
justify-content: center;
flex-wrap: wrap;
padding: 1rem;
}
nav {
margin-right: 0px;
}
a {
margin: 0.5rem;
}
}
Related
I have 2 text boxes in a css flexbox. Left side is a tagline and right side is a brief summary. I am trying to have them display on a webpage side by side in the center of the page for desktops only (i.e. min width 1024px) but let these boxes stack up below that breakpoint (i.e. on tablets, phones with widths below 1024px). The challenge here is that both of these text boxes combined cannot exceed 50% of the width of the page (horizontally). Right now, when expanding screen size, the text stretches to the ends of the screen. I tried many different fixes and nothing I tried worked properly!
My HTML Code:
<div class="info-block">
<div class="info-item">
<div class="info-col">
<h4>Modern Approach, Innovative Solutions, Accessible Support</h4>
</div>
<div class="info-col">
<div class="info-text">We approach problems with holistic and practical solutions, each and every time.</div>
</div>
</div>
</div>
My CSS code:
.info-item {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
margin: 0;
}
.info-item:last-child {margin: 0;}
.info-col {
width: 46.6%;
font-size: 24px;
}
.info-col:first-child {
text-align: right;
}
.info-text {
margin: 0 0 20px;
font-size: 24px;
line-height: 115%;
font-weight: 200;
}
#media screen and (min-width: 1900px) {
.info-text {
margin-right: 200px;
max-width: 420px;
margin-top: 5px;
}
.info-col {
max-width: 420px;
}
Any help or suggestions would be greatly, greatly appreciated!
Easy. Add this to your CSS:
#media screen and (max-width: 1024px) { /* If screen size is maximum 1024px */
.info-item {
flex-direction: column; /* Set the flex direction to */
}
.info-col {
width: 100%; /* Setting width to 100% */
}
}
To keep the items centered, you need to set the width to 100% while you stack the columns on smaller screens.
What can I do to make the body cover the whole page? In my CSS for body and html height and width 100%.
With the mobile version, the body is reduced in this way
With the pc version, everything is fine with the width, but the height is not on the whole page
html {
overflow: auto;
height: 100%;
width: 100%;
}
body {
background-color: #1c1c1c;
font-family: 'Press Start 2P', cursive;
}
Here is my full html and css
and if you can tell me what else can be corrected, I will be very grateful
many of your elements have fixed width in px, which doesn't change in the media query. E.g. you have:
.container {
width: 890px;
...
}
.menu__list {
...
width: 700px;
}
You need to change them in your media query
#media screen and (max-width: 450px) { ... }
Personallly I'd keep only the container width in px for desktop and other things in percents, then in mobile versions I'd keepp them all in percents like
.container {
width: 100%
}
Or sometimes
.container {
width: 100%
max-width: 320px;
}
Basing on the first code you posted.
Modify your container class css (Desktop) since its inheriting from wrapper.
.container {
margin: 0 auto;
}
Your current css ( remove width & padding )
.container {
width: 890px;
margin: 0 auto;
padding: 0 20px;
}
Mobile is fine, its just inheriting the screen size of the emulator.
Finally, I have a row of boxes like this:
See the code in action on Codepen . StackOverflow can not show it correctly.
Here is the css I used:
#font-face {
font-family: "Heebo-Light";
src: url(Heebo-Light.ttf) format("truetype");
}
svg {
position: relative;
display: block;
overflow: visible;
pointer-events: none;
}
body {
background-color: #FDFDFD;
}
.box svg:nth-of-type(1) {
position: absolute;
z-index: 2;
left: 0;
top: 0;
min-width: 0;
}
.box svg:nth-of-type(2) {
position: absolute;
z-index: 1;
left: 0;
top: 0;
min-width: 0;
}
.subbox-container {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.main-container {
width: 100%;
height: 100vh;
gap: 20px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
align-content: center;
/*overflow: hidden;*/
/* flex-flow: row wrap;*/
min-width: 0;
}
.background-rectangle {
transform: translate(49.3315px, -24.31px);
left: 0;
top: 0;
margin-right: 0 !important;
min-width: 0;
}
.box-container {
position: relative;
transform: translate(-49.3315px);
top: 0;
min-width: 0;
}
* { min-width: 0; }
When the number of boxes is more than 8, or when you resize the browser the page has not the space to show them all with the fixed widths. Since I want to resize all the elements to fit in any size and width I added min-width: 0; to all the elements but it doesn't change anything.
I know we can set the flex-flow: row wrap; to show all the boxes on the one page, but I wonder if there is a solution with flexbox to reduce the size of all boxes to show them in one row on the page?
I mean if all widths of all boxes reduce a bit the whole thing coud be seen on a singl row... is this possible using flexbox?
It looks like you are adding some inline widths to your child elements. Although you have assigned min-width: 0 to the parent, the content is still going to take up space due to the static inline width you've defined on the child elements such as .box, .background-rectangle, and svg. To ensure these elements don't go overboard their parent utilize CSS property max-width.
.box, .background-rectangle, svg {
max-width: 100%;
}
https://codepen.io/emineminems/pen/MWyazdQ
what I don't understand is, do these codes belong to you ? why can't you assign a specific width value for each box ?
You can use media query, which varies for each dimension separately. Like this:
#media screen and (max-width:550px) {
.box-container1{
width: xxxxxxxxxx ;
}
}
// Extra small devices (portrait phones, less than 576px)
#media (max-width: 575.98px) { ... }
// Small devices (landscape phones, less than 768px)
#media (max-width: 767.98px) { ... }
// Medium devices (tablets, less than 992px)
#media (max-width: 991.98px) { ... }
// Large devices (desktops, less than 1200px)
#media (max-width: 1199.98px) { ... }
Reference : https://getbootstrap.com/docs/4.1/layout/overview/
I'm fairly new to responsive web design, so don't beat me up too badly.
I have a currently fixed-width gallery page that is 1000px wide. The 1000px outer div has 30px padding and 30px between each pair of images. So I've got 910px of space available for each pair. The page might look like this:
(30px spacing)(500px img)(30px spacing)(410px image)(30px spacing)
(30px spacing)(480px img)(30px spacing)(430px image)(30px spacing)
(30px spacing)(450px img)(30px spacing)(440px image)(30px spacing)
...etc.
I'd like to convert it to a responsive page so that the images scale down as the browser window shrinks and ultimately stack on top of each other once the browser window drops below 640px.
The only way I know to make this 640px change is inside a stylesheet. Is this the only way I can do this? Am I going to have to define styles within the stylesheet for every image?
For example, for a 480px wide image:
img.img480 {
width: 48%;
float: left;
}
#media screen and (max-width: 640px) {
img.img480 {
width: 100%;
max-width: 480px;
float: none;
}
}
Here is an example of the effect you're asking for with responsive design.
A couple things to note:
margins are bad, use padding and wrappers instead
floats are bad, use inline-block instead
(Demo)
html, body {
margin: 0;
}
.wrapper {
padding: 0 15px;
font-size: 0;
}
.img-wrp {
width: 50%;
padding: 0 15px;
display: inline-block;
box-sizing: border-box;
}
.img-wrp img {
width: 100%;
}
#media screen and (max-width: 640px) {
.img-wrp {
width: 100%;
}
}
<div class="wrapper">
<i class="img-wrp"><img src="//lorempixel.com/640/480" /></i>
<i class="img-wrp"><img src="//lorempixel.com/640/480" /></i>
</div>
Getting what appears to be rogue margin off of a google map element. The gallery should be on the right but this margin is stopping that. Can't seem to find what's producing this margin. Even the element inspector 'Metrics'? tool shows there is no margin, but the element highlighting on the screen shows a margin that pushes to the right edge of the page
My CSS for the element.
.gallery-map {
height: 320px;
}
#media (min-width: 415px) {
.gallery-map {
height: 416px;
}
}
#media (min-width: 780px) {
.gallery-map {
height: 500px;
width: 500px;
}
}
Explicitly set margin and margin-right to 0, tried to contain it in a wrapping div (that removed the rogue margin from the map element and put it on the new wrapping element) and several other things.
A link to the branch I'm working on for this
The fix was setting a couple of inline-blocks
.gallery-map {
height: 320px;
display: inline-block;
#media (min-width: 415px) {
height: 416px;
}
#media (min-width: 780px) {
height: 500px;
width: 64.5%;
}
}
Also to get that gallery to come along side I needed to add the inline-block specifically to the media query
.gallery {
height: 318px;
overflow-y: scroll;
overflow-x: hidden;
#media (min-width: 780px) {
width: 35%;
display: inline-block;
}
}