Mobile scale to fit screen on the iphone (Barber Theme)

Hello, I hope all is well. When viewing from a mobile device, the padding and margins are unnecessary.

How do I scale to fit the pricing section for the barber theme?

Maybe I can strip the margins when using a mobile device?

Thanks for the help!

Here is a link to the pricing page. I'm trying to contain all the long descriptions... :)
http://asimplet.wwwss51.a2hosted.com/#price

I Have the same problem.

The theme don't preview use for "LONG ITENS" - original theme use itens like : "HAIRCUT" "SHAVE"... I my case I use this template for a restaurant, and I have itens like "Roasted Garlic & Red Pepper ".

To solve this I need to test the pricing menu for each resolution - and create <BR> break lines to put all words into the black bg.

To help - I re-create the container - to expand black bg for small devices.

I delete the class "CONTAINER" of the 2nd line of the "Price Section" and put a new CSS tag -

I create a new CSS - called: .price-Menu

``

Put this lines in @media (max-width: 1199px) in RESPONSIVE.CSS file. (this lines will expand the black BG to 100% width for small devices) - it will help us to got more space in small devices.

@media (max-width: 1199px) {
    .price-menu {
	width: 100%;
    }
}

And I put this lines in BARBER.CSS - this will re-create the black bg for large devices - with width: 80% - and free sides.

@media (min-width: 992px) {
   .price-menu {
    width: 80%; 
    display: block;
    margin: auto;
    }
}

hope it help you

As I said, I'm having the same issue with barber theme..

I test now on iPhone 4 and 7 - and in booth - even doing the enlarge of the black background as I proposed above - I really think that is impossible to correct this issue..

In my case - on screen I got only 2 words of the item.. to correct this I need to break the line 3x to complete the item "“Roasted Garlic & Red Pepper"

Roasted Garlic & <br>
Red Pepper.....<br>
$10.00

this will solve for small devices - but in large devices will be very weird - because all words will be on top of each other on the left, and the price will be on the right "far far far away"... and a lot of space in the middle..

Another issue in iPhone - we need more padding/margin because some text are very very very close to the edge/border and sometimes got cutted..

hope Semicolon can solve this for us..

I see what you did, but all I ended up adding was display:inline to the container and now it resizes to the full width of my mobile device..... I just need to figure out where to and the left/right padding...because it is using every last pixel. lol

Here is the change...
<div class="container nobottommargin clearfix" style="display:inline;">

Canvas is probably the best set of templates around, mainly because of all their design options.

Example without padding

Awesome! that fixed the padding issue along with all the other errors thanks to your help.