Chapter 5 Chapter 5: Fine-Tune Styling

Outline

01. Set common styling

styling settings

If some styling settings need to have effects on all children, then do settings for the parent element, not individual child. Example of stylings that should be inherited are:

  • Text alignment
  • Color

Important!

The following styling should be set to individual elements to avoid the theme’s override:

  • Font styles

02. Set device-specific styling

2.1. Set device-specific value only when needed

Page Styling settings

When editing the device-specific layout:

  • If no special styling is required, leave the value to either “–” or blank.
  • If special styling is required, try to update those parameters that already has some value set in “All”.

2.2. Use device-specific image only when needed

customize layout for mobile view

If no special image is required for individual devices, just set once in “All” mode. PageFly will automatically generate and choose appropriate image size for individual devices.

03. Set background

3.1. Set background image

set background image

  • Be thoughtful when selecting which container to have a background. For example:
    • The full-width background must be set to section.
    • A background designed only for a specific container must be set to the column.
    • The decorative background of some elements must be set to that element.
  • Clearly, understand the Background Size parameter and choose “Contain” and “Cover” carefully.
    • If “Size” is set to “cover”, then “Repeat” is not required.
  • If the background is patterned, create a seamless background image carefully and utilize the “Repeat” parameter accordingly.

3.2. Handle background image with border properly

If the background image has a border, better to cut that border out of background image and use “Border” settings instead. That will make the layout looks good on all devices automatically.

bad border in image
Have background image with border will make it scale on different devices poorly
good border
Have background image without border will make it look good on all devices.
Also, the border will look “cleaner” (without “dirt” created by JPEG compression).

04. Handle lines

4.1. Use border if possible

styling setting

Most of the time, lines are just a decoration of some elements. In that case, use border settings of that element instead of the Divider element.

4.2. Use divider when needed

use divider when needed

If the design is sophisticated, which made it impossible to use a border, use the divider element.

4.3. Handle inline & block elements

handline and inline block

By default, block-level elements (heading, paragraph, etc.) will expand their width to the full container. If you want those elements to have width-by-content behavior, then set “Inline” in the Display section.

Read more about the difference between inline and block elements.

05. Keep line-height consistent

keep line height consistent

  • The line-height of similar text elements should be the same.
  • If no special design requirements, the recommended value is 1.5 for both heading and paragraph.

06. Do not set redundant values

Case #1

line height setting
Clear the box to see the inherited value.

If there are no visual boundaries around content, do not set spacing parameters.

Case #3

Styling settings

styling settings

If some parameter is set in “All” mode already, no need to set it on “Mobile” to the same value.

07. Avoid using Custom CSS code

  • Try to use element parameters to get the job done with no custom CSS code involved.
  • Set styling parameters only when necessary. It’s better to keep the page inherit style from the theme.

Try out all PageFly features with Free plan

.myshopify.com
Don’t have Shopify store yet? Create store
×