How to center this grid layout with css? [closed] - html

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I want to have the pinterest like items to be centered in the page.
my website: www.keto.hu
Thank you!!

Add width: 1210px to the following rule.
#main-content #grid, #main-content #content {
margin: 0px auto;
width: 1210px;
}
For responsive width use percentage.
#main-content #grid, #main-content #content {
margin: 0px auto;
width: 89.5%;
}

Related

html+css Error in css float boxes with image fixed width [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have some images with original size 260px, i want to show 4 images per line in the container with max-width:1024px; so i set image width 100% and a div box container width:205px; and margin: 10px; and the error occures, what is wrong with the code below?
What happens:
[a print screen of the error][1]
The code is this:
https://www.appdevtools.com/pastebin/k3fxj5
in your case your should use FlexBox.
Like this:
.clearfix {
max-width:1024px;
display: flex;
justify-content: space-between:
flex-wrap: wrap;
}
.linkbox {
width: 205px;
margin: 10px;
border: 1px solid black;
}

Can someone please tell me why my "name" class goes over my navigation menu on mobile please [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
When viewed at mobile and tablet, my "name" class will conflict with my burger menu.
https://johnblairgraphicart.firebaseapp.com/
#media (max-width: 480px) {
.name {
display: block;
position: relative;
bottom: 0px;
left: 10px;
width: 80%;
}
}
this put your class at end of nav without top space and menu items after clicking work correctly
div is by default block level elements which takes width 100%.
and you have given top :50px for img, which is overlapping irrespective of what ever is at bottom.
you can add
.logo{
width:41px;
display:inline-block;
margin-top:50px;
}
.menu{
width:calc(100% - 50px);
display:inline-block;
margin-top:50px;
}

Center a button [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
My website is currently hosted here: https://jogh-reports-zaksheikh.c9users.io/. At the bottom a load more button appears and I need to center this button and make it fill the width of the last post. How can I do this?
Thanks
Try this
#infinite-handle {
overflow: hidden;
max-width: 88%; /* adjust as per requirement*/
margin: 20px auto; /* adjust as per requirement*/
}
As per your comment the Updated Code :
#infinite-handle {
overflow: hidden;
max-width: 50%;
margin: 20px 0px;
}
if i get you right, you problem is in your max-width for infinite-handle, you should use something like none or 90% instead of fixed value and change magin left/right to feel space. For example:
margin: 20px 1%;
width: 98%;
max-width: none;

What is blocking my pitcure in my website? HTML, CSS [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I want my pictures to be complete and centered but there is something blocking it, is a slider for 9 pictures and each picture has a box that holds inside the picture.
The main problem is the plantilla that holds the picture, the thing is tha I've been trying to make it bigger so the image can occupy the whole center of the page
This is part of the code that I have in my css
div.carousel .col-md-4.animation-element {
min-width: 400px !important;
margin-left: 0%;
}
.carousel-indicators {
margin-bottom: 10%;
}
.carousel .item{
margin: 0 auto;
}
and this is the Website
I've tried to change the css of bootstrap but not even that worked, I've put the configuration "margin: 0 auto;" also but nothing
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
I removed the overflow: hidden; and it looks fine to me.

How to stretch full height of a div using CSS? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
How to stretch full height of a div using CSS?
I'm trying to stretch a div 100%. Applied min-height: 100%; but no result.
<div class="mydiv"></div>
.mydiv {
min-height: 100%;
}
In your css, try add this, it work for me :)
.divName{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background:red;
}