Jump to content

(RESOLVED)Changing Font Size


Recommended Posts

On the View Product page, the Product Name is an <h1> tag (I understand this to be significant for search engines).

Foundation's CSS rules put this at several sizes depending on how Foundation scales the layout for desktops, pads, and mobile devices.

In the file /skins/foundation/css/cubecart.default.css, add these rules:

h1 { font-size: 1.825rem; } /* was 2.125 */
@media only screen and (min-width: 40.0625em) and (max-width: 64em) { h1 { font-size: 2.5rem; } } /* was 2.75 */

The first rule sets the default for all screen sizes. The second makes the font size smaller but still bigger than the default when viewing on a mobile.

Link to comment
Share on other sites

The text in product panels is an <h3> tag. So, use these rules:

h3 { font-size: 1.25rem; } /* was 1.6875 */
@media only screen and (min-width: 40.0625em) and (max-width: 64em) { h3 { font-size: 1.0rem; } } /* was 1.375 */

For the color, use this rule:

.panel a, [id^="sidebar"] { color: black; }

The first part gives the color to the links in product panels. The second part gives the color to any HTML that has an ID that starts with "sidebar", meaning "sidebar_left", "sidebar_right", etc.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...