Currently, I am utilizing the 960 Smart Grid to create a website. This grid system prioritizes mobile design and I am encountering some challenges. The padding-left element must remain consistent for the grid system to function properly, except in the default layout when everything is displayed in a single column.
I found it necessary to adjust the padding for an element within the mobile view, but this modification causes issues when the element exceeds the width of the single-column view (greater than 768 pixels). Reverting back to the original style sheet's padding settings is proving to be tricky for me.
As a beginner in this field, my site is not live yet but I am willing to provide any necessary code snippets. Specifically, I am trying to alter the padding of a paragraph element nested within a div element.
<div id="intro" class="columns twelve" class="row">
<p id="tagline" class="columns eight offset-two">Sample Text.</p>
</div>
The main goal is to set a 6% padding for the paragraph element in the mobile view. Once the width reaches a minimum of 768 pixels, the 6% padding should be removed as it disrupts the alignment of the tag within the offset-two section. The offset value in the smart grid style sheet relies on a padding-left attribute based on screen size. I would prefer to revert to the default padding from the smart grid style sheet across all media queries if possible. For more details about the grid structure, refer to the link provided at the beginning of the query.
Appreciate any assistance provided.