Kevin Powell - Community•2y ago

Issue with centering the elements

When I go into mobile view, the elements are centered and i dont know how to do that. Here is the code. https://codepen.io/Aman-sghh/pen/KKBNpvq

Aman

CodePen

KKBNpvq

...

16 Replies

Aman•2y ago

I want the text and image to be centered in the mobile view

MarkBoots•2y ago

img => float: unset, display: block, margin-inline: auto

Aman•2y ago

in the media query? @markboots. It didnt do anything? @jochemm Can you plz help me with this issue?

Jochem•2y ago

why are you @'ing me? don't just randomly @ people 😛

Mannix•2y ago

in media-query on your .soko selector just add float: revert;

Jochem•2y ago

unset works too, like Mark suggested

Aman•2y ago

sorry, its just that you helped me nicely before thanks man it worked

Mannix•2y ago

sure it does revert doesn't go as far as unset tho per this video https://www.youtube.com/watch?v=6UwISwr_yUo

Kevin Powell

YouTube

Initial doesn't do what you think it does

We often think initial sets something back to how it started, but it actually does a lot more than that. Often, we're looking for unset or revert instead. 🔗 Links ✅ Codepen: https://codepen.io/kevinpowell/pen/qBjqwJO ✅ Twitch: https://www.twitch.tv/kevinpowellcss ✅ Additional reading: https://developer.mozilla.org/en-US/docs/Web/CSS/rever...

Jochem•2y ago

I'll gladly help again, but I'll see the thread when I see it, and see if I can help this time or not

Aman•2y ago

    display: inline-block;
      clear: left;
      margin: 4% auto;
      transition: 0.25s;
      width: 100%;

    display: inline-block;
      clear: left;
      margin: 4% auto;
      transition: 0.25s;
      width: 100%;

I also want the text to be center. But want to be away from the sides. Is there a nicer way to do it rather than doing it manually with margin?

Mannix•2y ago

padding is used to create space around element margin is to add space between elements

MarkBoots•2y ago

thanks guys, was away for a sec.

Aman•2y ago

padding is only visible on the left side, need to scroll to c it on the right.

MarkBoots•2y ago

set * { box-sizing: border-box } in your document. That makes sure padding and borders will be included in the set size of an element. Also, don't use width 100% if not nessessary

MarkBoots•2y ago

I would like to suggest picking up a small course such as https://courses.kevinpowell.co/conquering-responsive-layouts (free)

Kevin Powell

Conquering Responsive Layouts

Are you ready to take the challenge and finally figure out responsive layouts? Click the button below and jump in!

Gaming

Programming

Issue with centering the elements