https://i.stack.imgur.com/rDst8.jpg
How do i fix it?
I want to make it like this
https://i.stack.imgur.com/m2Jfh.jpg
The first image is my website when i use normal mode / phone mode
The second image is my website when i use desktop mode in my phone
My css:
text-align: center;
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
font-size: calc(10px + 2vmin);
color: white;
To make it look more like the first image, you need to specify a viewport (if you haven't already) before </head> with this code:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If you reload, you will probably see that it looks much better.
Next, you should also specify a max width in your CSS:
max-width: 90%;
You should also add a margin to the sides:
margin-left: 5%;
margin-right: 5%;
You can use flex: wrap; to fix it,
and It can be done in many ways. you can explore the flex and grid properties in here,
https://developer.mozilla.org/en-US/docs/Web/CSS
Related
I've made a neat little prime number generator and I'm trying to get it to look nice. The idea is that I have half the screen as the input, and the other side as output.
body{
background-color: #F5E9E2;
color: #0B0014;
display:flex;
}
.inputSide{
display:flex;
flex-wrap: wrap;
width: 50vw;
justify-content: center;
}
.inputDiv{
width: 200px;
padding: 50px;
background-color:#E3B5A4;
}
.outputSide{
width: 50vw;
display: flex;
height: 25 px;
}
(https://codepen.io/seth-alan-burleson/pen/NWRNLOG?editors=1111)
I've taken out most of the extra stuff as I'm trying to just fix these elements at the moment. I'm also using React for frontend rendering if that matters.
The issue arises when you put a larger number in for the maximum (lets say 1000+) the page turns very ugly. I'd like for the input side to at least stay the same, and possibly have the output side scale the font size down or be scrollable. I'm just not quite sure how to do it.
I have an image inside a scrollable div and it is getting cut off by about 50% I am guessing. I can only see the bottom 50%.
Here is the relevant css:
.imgContainer{
height:auto;
display:flex;
align-items:center;
overflow:auto;
}
.img{
width: auto;
max-width:100vw;
height:auto;
}
Here's a link to a deployed version on heroku (you may have to click "skip" a few times to get an image and clicking an image lets you see the full version). https://weratestatists-bot.herokuapp.com
Also if anyone can figure out why my favicon isn't working I'd much appreciate it. Thanks!
Change
.post, .titleCont {
display: flex;
align-items: center;
}
to
.post, .titleCont {
display: flex;
align-items: baseline;
}
Also your favicon is broken in some browsers because you put 2 slashes in the URL
<link rel="shortcut icon" href="//favicon.ico?v=2">
should be
<link rel="shortcut icon" href="favicon.ico?v=2">
You can do center crop image so that each center part of image is shown amd it will also make sure that your image is neither pixelated nor stretched
Img {
Object-fit: cover;
Object-position: center;
}
Centred flexbox items can have undesirable behaviour when they overflow their container.
Several non-flex solutions have been provided for this issue, but according to MDN there is a safe value which is described as follows.
If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start.
It can be used as follows.
align-items: safe center;
Unfortunately, I haven't been able to find any examples or discussions of this, or determine how much browser support there is for it.
I have attempted to use safe in this CodePen. However, it doesn't work for me. The safe seems to be ignored, or perhaps the container element is improperly styled.
I'd really appreciate it if anyone could shed some light on safe and whether and how it can be used to solve the overflow problem, as demonstrated by the CodePen example.
The newer keyword safe still has bad browser support, so to get the same effect, cross browser, use auto margins for now, which should be set on the flex item.
Updated codepen
Note, to compensate for the modal's 50px top/bottom margin, use padding on modal-container.
.modal-container
{
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start; /* changed */
position: fixed;
width: 100vw;
height: 100vh;
overflow-y: scroll;
padding: 50px 0; /* added */
box-sizing: border-box; /* added */
}
.modal-container > #modal
{
display: flex;
flex-direction: column;
align-items: center;
margin: auto 0; /* changed */
padding: 12px;
width: 50%;
background-color: #333;
cursor: pointer;
}
safe isn't implemented in most browsers yet. You can recreate some of its functionality with auto margins.
I was trying to use justify-content: safe center to have a bunch of items centered in a footer when the viewport was wide, but have them able to scroll without clipping off the left side when the viewport was small.
When I tried to fix this with auto margins as Ason suggested, it did fix the clipping, but it also spread the items out evenly, which isn't what I wanted.
I found I could simulate safe center in this context by applying auto margins to only the first and last elements.
Assuming my flex items have class "item":
.item:first-child {
margin-left: auto;
}
.item:last-child {
margin-right: auto;
}
CodePen with examples comparing each solution
Use align-items: flex-start; instead of using it with the safe keyword, Also, you can add margin/padding to get the desired behavior for the same.
I use the WP Featherlight plugin on Wordpress. I want to put the description of an artwork in the lightbox right next to the image, not underneath like it is at this moment. How can I do that?
You can see the website here.
Hope you can help me out!
You have to change the css properties of your lightbox and the corresponding figcaption elements.
Refer code & make the changes accordingly:
.gallery-item {
display: inline-block;
text-align: left;
vertical-align: top;
width: 100%;
min-width: 260px;
}
.gallery-icon {
display: inline-block;
vertical-align: middle;
}
.gallery-caption {
display: inline-block;
vertical-align: middle;
width: 100px;
}
Attaching screenshot after the above changes are done:
1. Set your gallery container (e.g. div#gallery-2) to flex row.
Like this:
display: flex;
flex-flow: row wrap;
2. Set figure.gallery-item to flex and align it's text, provide a fixed width (I used 25%) so items stack in row, otherwise each item will be full width pushing the next down:
Properties:
display: flex;
align-items: center;
width: 25%;
3. Give .gallery-caption some breathe from image.
Properties:
margin-left: 5px;
Thanks for the response. If the user clicks on an artwork then the lightbox will open. I want the description is on the right side of the artwork. In the lightbox I want to put some more info than on the actual page. Hope this is more clear.
I want to reduce the size of the alert. I've tried:
.alert{
align-content: center;
width: 20%;
}
But it doesn't work, I've also tried to reduce the whole container width. I've also tried to make the alert the width of his content but didn't work either:
.alert{
display:inline-block;
}
My alerts contain and many links like that:
/website1
Try using
.alert{
align-content: center;
width: 20% !important;
}