If you go to: http://tastefreak.50pixels.com/ and resize your browser to a mobile width you will see there is a 30px margin between each recipe.
However you go to this page: http://tastefreak.50pixels.com/?cat=6 and do the same thing the margin is not being used and the blocks seem to be different sizes. I am pretty sure the mark-up for them is the same so do not know what is causing this to happen.
I’m not sure why, but it looks like `display: inline-block;` is missing on the 2nd page there for .rcpBox, adding that seems to fix it.
It appears on the first page these boxes are using `.slidesContainer .slidercp .rcpBox {}` under `@media=”all”` for their css rules, whereas on the second page they are only using `.slidesContainer .rcpBox {}` under `@media screen and (max-width: 1000px` which seems to be missing the `display: inline-block`
Hope this helps.
Author
Posts
Viewing 2 posts - 1 through 2 (of 2 total)
The forum ‘CSS’ is closed to new topics and replies.