Using CSS to center a container block
up vote
-2
down vote
favorite
I am trying to center this container block with the background image on my website. The problem is whenever I use margins, it appears different on the mobile version of the website compared to the desktop version. Here are pictures of what the container looks like on desktop version, on mobile version, and the line of code that controls the container.
javascript html css
asked Nov 10 at 18:43
Shinookie Cookie
42
add a comment |
up vote
-2
down vote
favorite
I am trying to center this container block with the background image on my website. The problem is whenever I use margins, it appears different on the mobile version of the website compared to the desktop version. Here are pictures of what the container looks like on desktop version, on mobile version, and the line of code that controls the container.
javascript html css
asked Nov 10 at 18:43
Shinookie Cookie
42
share code also for better understanding.
– Shiv Kumar Baghel
Nov 10 at 18:46
This is a classic: codepen.io/shshaw/pen/gEiDt?editors=0110height: whatever; width: whatever; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
– enxaneta
Nov 10 at 18:57
I did share the code. Did you click on the hyper link labeled "line of code"?
– Shinookie Cookie
Nov 10 at 18:58
add a comment |
up vote
-2
down vote
favorite
up vote
-2
down vote
favorite
I am trying to center this container block with the background image on my website. The problem is whenever I use margins, it appears different on the mobile version of the website compared to the desktop version. Here are pictures of what the container looks like on desktop version, on mobile version, and the line of code that controls the container.
javascript html css
asked Nov 10 at 18:43
Shinookie Cookie
42
I am trying to center this container block with the background image on my website. The problem is whenever I use margins, it appears different on the mobile version of the website compared to the desktop version. Here are pictures of what the container looks like on desktop version, on mobile version, and the line of code that controls the container.
javascript html css
javascript html css
asked Nov 10 at 18:43
Shinookie Cookie
42
asked Nov 10 at 18:43
Shinookie Cookie
42
asked Nov 10 at 18:43
Shinookie Cookie
42
asked Nov 10 at 18:43
Shinookie Cookie
42
asked Nov 10 at 18:43
Shinookie Cookie
42
42
share code also for better understanding.
– Shiv Kumar Baghel
Nov 10 at 18:46
This is a classic: codepen.io/shshaw/pen/gEiDt?editors=0110height: whatever; width: whatever; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
– enxaneta
Nov 10 at 18:57
I did share the code. Did you click on the hyper link labeled "line of code"?
– Shinookie Cookie
Nov 10 at 18:58
add a comment |
share code also for better understanding.
– Shiv Kumar Baghel
Nov 10 at 18:46
This is a classic: codepen.io/shshaw/pen/gEiDt?editors=0110height: whatever; width: whatever; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
– enxaneta
Nov 10 at 18:57
I did share the code. Did you click on the hyper link labeled "line of code"?
– Shinookie Cookie
Nov 10 at 18:58
share code also for better understanding.
– Shiv Kumar Baghel
Nov 10 at 18:46
share code also for better understanding.
– Shiv Kumar Baghel
Nov 10 at 18:46
This is a classic: codepen.io/shshaw/pen/gEiDt?editors=0110
height: whatever; width: whatever; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;– enxaneta
Nov 10 at 18:57
This is a classic: codepen.io/shshaw/pen/gEiDt?editors=0110
height: whatever; width: whatever; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;– enxaneta
Nov 10 at 18:57
I did share the code. Did you click on the hyper link labeled "line of code"?
– Shinookie Cookie
Nov 10 at 18:58
I did share the code. Did you click on the hyper link labeled "line of code"?
– Shinookie Cookie
Nov 10 at 18:58
add a comment |
2 Answers
2
active
oldest
votes
up vote
0
down vote
accepted
You are setting a fixed width of 840px. This is wider than the mobile screen, thus the container will go offbounds.
Consider using a percentage for the width, media queries or css grids.
answered Nov 10 at 18:50
AWhitePelican
714
add a comment |
up vote
0
down vote
You're using fixed width. Try using percentage.
answered Nov 10 at 18:50
Jaime
265
So would I also use percentage with the margins for both versions to to be affected equally?
– Shinookie Cookie
Nov 10 at 19:06
For desktop you would normally use 80% and for mobile 100%
– Jaime
Nov 12 at 2:24
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
You are setting a fixed width of 840px. This is wider than the mobile screen, thus the container will go offbounds.
Consider using a percentage for the width, media queries or css grids.
answered Nov 10 at 18:50
AWhitePelican
714
add a comment |
up vote
0
down vote
accepted
You are setting a fixed width of 840px. This is wider than the mobile screen, thus the container will go offbounds.
Consider using a percentage for the width, media queries or css grids.
answered Nov 10 at 18:50
AWhitePelican
714
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
You are setting a fixed width of 840px. This is wider than the mobile screen, thus the container will go offbounds.
Consider using a percentage for the width, media queries or css grids.
answered Nov 10 at 18:50
AWhitePelican
714
You are setting a fixed width of 840px. This is wider than the mobile screen, thus the container will go offbounds.
Consider using a percentage for the width, media queries or css grids.
answered Nov 10 at 18:50
AWhitePelican
714
answered Nov 10 at 18:50
AWhitePelican
714
answered Nov 10 at 18:50
AWhitePelican
714
answered Nov 10 at 18:50
AWhitePelican
714
714
add a comment |
add a comment |
up vote
0
down vote
You're using fixed width. Try using percentage.
answered Nov 10 at 18:50
Jaime
265
So would I also use percentage with the margins for both versions to to be affected equally?
– Shinookie Cookie
Nov 10 at 19:06
For desktop you would normally use 80% and for mobile 100%
– Jaime
Nov 12 at 2:24
add a comment |
up vote
0
down vote
You're using fixed width. Try using percentage.
answered Nov 10 at 18:50
Jaime
265
So would I also use percentage with the margins for both versions to to be affected equally?
– Shinookie Cookie
Nov 10 at 19:06
For desktop you would normally use 80% and for mobile 100%
– Jaime
Nov 12 at 2:24
add a comment |
up vote
0
down vote
up vote
0
down vote
You're using fixed width. Try using percentage.
answered Nov 10 at 18:50
Jaime
265
You're using fixed width. Try using percentage.
answered Nov 10 at 18:50
Jaime
265
answered Nov 10 at 18:50
Jaime
265
answered Nov 10 at 18:50
Jaime
265
answered Nov 10 at 18:50
Jaime
265
265
So would I also use percentage with the margins for both versions to to be affected equally?
– Shinookie Cookie
Nov 10 at 19:06
For desktop you would normally use 80% and for mobile 100%
– Jaime
Nov 12 at 2:24
add a comment |
So would I also use percentage with the margins for both versions to to be affected equally?
– Shinookie Cookie
Nov 10 at 19:06
For desktop you would normally use 80% and for mobile 100%
– Jaime
Nov 12 at 2:24
So would I also use percentage with the margins for both versions to to be affected equally?
– Shinookie Cookie
Nov 10 at 19:06
So would I also use percentage with the margins for both versions to to be affected equally?
– Shinookie Cookie
Nov 10 at 19:06
For desktop you would normally use 80% and for mobile 100%
– Jaime
Nov 12 at 2:24
For desktop you would normally use 80% and for mobile 100%
– Jaime
Nov 12 at 2:24
add a comment |
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53242248%2fusing-css-to-center-a-container-block%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
share code also for better understanding.
– Shiv Kumar Baghel
Nov 10 at 18:46
This is a classic: codepen.io/shshaw/pen/gEiDt?editors=0110
height: whatever; width: whatever; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;– enxaneta
Nov 10 at 18:57
I did share the code. Did you click on the hyper link labeled "line of code"?
– Shinookie Cookie
Nov 10 at 18:58