css does not displaying properly on mobile browser

Question

My css for the above web page looks fine on browsers on the desktop, however, on mobile browsers the border around the food ingredients are displayed incorrectly:

Relevant CSS :

.page_title {
  text-transform:capitalize;
  text-align:center;
}
.food_list {
  text-transform:capitalize;
}

.listing {
  text-indent:10px;
  margin-right:1500px;
  margin-left:10px;
  color:black;
  background-color:lightblue;
  border-radius: 10px 20px 30px 40px;
  -moz-border-radius: 10px 20px 30px 40px;
  -webkit-border-radius: 10px 20px 30px 40px;
  -khtml-border-radius: 10px 20px 30px 40px;
}

.ul {
  list-style:none;
}

p {
  text-transform:none;
}

p span {
  display:block;
}

remove margin-right:1500px;, and what your mean about "displayed incorrectly" ? — Mohsen Safari
– Mohsen Safari, Commented Nov 24, 2013 at 5:38
The reason why I had margin-right:1500px is so that on a pc browser, the box would not stretch across the whole screen. How could I just have the box just surround the ingredients section on both the pc and mobile browsers?? — barakisbrown
– barakisbrown, Commented Nov 24, 2013 at 6:08
You can also refer to CSS3's media query features here That can ensure your desired size for both desktop and mobile browsers. — RocketArrows1
– RocketArrows1, Commented Nov 24, 2013 at 7:24

Mohsen Safari · Accepted Answer · 2013-11-24 06:46:36Z

1

try this:

jsFiddle

.listing {
    text-indent: 10px;
    margin-left: 10px;
    color: black;
    float: left;
    background-color: lightblue;
    border-radius: 10px 20px 30px 40px;
    -moz-border-radius: 10px 20px 30px 40px;
    -webkit-border-radius: 10px 20px 30px 40px;
    -khtml-border-radius: 10px 20px 30px 40px;
}

h2{
    clear:both;
}

answered Nov 24, 2013 at 6:46

Mohsen Safari

6,8055 gold badges45 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

css does not displaying properly on mobile browser

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related