CODEWITHSUNDEEP
htmlcss
barakisbrown
barakisbrown

Reputation: 1323

css does not displaying properly on mobile browser

This is my page

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;
}

Upvotes: 0

Views: 340

Answers (1)

Mohsen Safari
Mohsen Safari

Reputation: 6795

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;
}

Upvotes: 1

Related Questions