Responsive menus with borders and the Box Model

Have you tried making a responsive menu where the elements have either padding, a border, or both? Then, when when viewed on a mobile device, they’re off the page equal to the pixel width of the padding and/or border?

Give this a shot, it resets the box model to what it should be, keeping the width of the element without expanding it.

menu a {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

Healing from Within

Healing from Within Web Design

The Healing From Within website was designed for a local alternative healer who wanted to present information on her services and rates, offer easy online payment options through PayPal, and provide a user-friendly contact form.

Project Specs

My Role: Photoshop, html, css, web design, web development

Client Location: Boylston, MA

Created For: Healing From Within, LLC

View Site

Healing From Above

Healing From Above Web Design and Development

HealingFromAbove.com, created for the same alternative healer mentioned previously, was designed for her more eclectic healing practices. Similar site functionality is present, though with a more dramatic visual flare.

Project Specs

My Role: Photoshop, html, css, web design, web development, jquery

Client Location: Boylston, MA

Created For: Healing From Within, LLC

View Site