Question 347638 in Html Question posted in
Some basic documentation can be found here.

Html – Center div on mobile view

I’ve made a project in which I centered a div with its content of image by width 50% and left margin 25%. For windows view it was perfect but when I hosted the website it’s content on my mobile weren’t very present and attractive as it was in a thin box and that 50% width wasn’t looking great on mobile. What should I do?

I centered div my 50% of my width but I wanted it to look good on mobile but I want to make it around 70-80% on mobile and still want it to look good on mobile

Tags:

2

Answers


  1. 0

    If you want to use different property values on a desktop and a phone you should use @media only screen and (max-width: 600px), in which u define style for phones. In this example, it will be activated if the screen width is less then 600px.

    Final CSS might look like this

    .myDiv{
    width: 50%;
}

@media only screen and (max-width: 600px) {
    .myDiv {
        width: 80%;

        /*center div*/
        margin: 0 auto;
    }
}
    Login or Signup to reply.
  2. 0

    if you want to use different property use @media screen and (max-width:991px){}

    in this you can apply flex with justify-content for calculating the width use max-width with width:100% result give accurate result and if you want to show it in column use flex-direction:column and for managing the center try margin:0 auto

    @media screen and (max-width:991px){
   display:flex;
   justify-content:center;
   margin:0 auto;
   flex-direction:column; //your choice
   max-width:80%;
   width:100%;

}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search