Hello Robert

Thanks for your feedback and appreciation. The first two things are not possible. I understand your desire but some people like it unset. You know many man many minds. Could you please share screenshots of the last two things? I would check and respond to you.

Best regards

Hi Robert.

Majority things you mentioned belong to the area of responsibility of the template but not SPPB. SPPB is only one of the components. You may have other components and other types of pages. Therefore, all these settings should be done on the template level or in CSS.

Pre setting of free space of a section above and below for different devices

I do not think that it would be convenient. The designs that I get from web-designers in most cases do not comply with such standards.

Box shadow images does not suit the dimensions, using this often the box shadow starts a few pixels below the image.

The Image Addon has no shadow settings for the image. This has only general shadow settings for wrapper. Style tab is a general setting in all addons. The only way to add a shadow directly to the image is to use CSS

Using the source code of an addon the source code box won't close when done. It freeze and remains in your screen. You have to close the builder and open it again.

This is a bug

I hear you, free space depends always on the design/layout. In this case im working on now it would be handy.

I often try to stick with same sizes related to heading, to create some balance but for designing purposes I understand your point of view.

I often try to stick with same sizes related to heading, to create some balance but for designing purposes I understand your point of view.

My point of view regarding headings is fully consistent with yours. I set up this primarily in every new project. By the principle, set up and forgot. And it is tuned in the template or in CSS. SPPB inherits these values if you do not introduce other values for the headings directly in the addons settings.

You may have other pages, such as Сategory Blog or articles. There should be the same dimensions of the headings. That is why, setting is carried out at the template level. In SPPB it is not needed. This would lead to confusion.

Hi, you maybe have an example of yor custom css related to heading font size? My example but for what I mean I need to add the viewponts fot table and mobile. Or a good link where I can read about it.

/* scada-regular - latin */
@font-face {
  font-display: swap; /* Check developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Scada';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/scada-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/scada-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/scada-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/scada-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/scada-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/scada-v15-latin-regular.svg#Scada') format('svg'); /* Legacy iOS */
}
/* scada-italic - latin */
@font-face {
  font-display: swap; /* Check developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Scada';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/scada-v15-latin-italic.eot'); /* IE9 Compat Modes */
  src: url('../fonts/scada-v15-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/scada-v15-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/scada-v15-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/scada-v15-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/scada-v15-latin-italic.svg#Scada') format('svg'); /* Legacy iOS */
}
/* scada-700 - latin */
@font-face {
  font-display: swap; /* Check developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Scada';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/scada-v15-latin-700.eot'); /* IE9 Compat Modes */
  src: url('../fonts/scada-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/scada-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/scada-v15-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/scada-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/scada-v15-latin-700.svg#Scada') format('svg'); /* Legacy iOS */
}

body, p, h1, h2, h3, h4, h5, h6, a, li, span {font-family: 'scada';
}

Kind regards,

On the example of one of your font, I would suggest you reduce the volume of code.

1. woff2 and woff are enough for all browsers. (Unless you need to support ancient browsers).
2. If you apply the font to Body, then all other tags will inherit it. The listing of all tags is not required.
3. Always add sans-serif or serif (depending on the type of your font) when you use the font to the tag, this is necessary so that the font look does not change much until the load occurs.

/* scada-700 - latin */
@font-face {
  font-display: swap; /* Check developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Scada';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/scada-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/scada-v15-latin-700.woff') format('woff'); /* Modern Browsers */
}

body {
    font-family: 'Scada', sans-serif;
    font-weight: 400;
}
h1 {
    font-weight: 700;
}
/* ...and ect font-weight for other headings if they are different... */

For responcive headings font size, I usually use the snippet copied from Helix. And then I change the values in accordance with the design.

.h1, h1 {
    font-size:calc(1.375rem + 1.5vw);
}
@media (min-width:1200px) {
    .h1, h1 {
        font-size:2.5rem;
    }
}
.h2, h2 {
    font-size:calc(1.325rem + .9vw);
}
@media (min-width:1200px) {
    .h2, h2 {
        font-size:2rem;
    }
}
.h3, h3 {
    font-size:calc(1.3rem + .6vw);
}
@media (min-width:1200px) {
    .h3, h3 {
        font-size:1.75rem;
    }
}
.h4, h4 {
    font-size:calc(1.275rem + .3vw);
}
@media (min-width:1200px) {
    .h4, h4 {
        font-size:1.5rem;
    }
}
.h5, h5 {
    font-size:1.25rem;
}
.h6, h6 {
    font-size:1rem;
}

You are digging into this css file as it is?

https://imgur.com/a/RKQIKFk

Hi. You can beautify this code in VS Code and use CTRL+F to find what you need, or open this file via Dev Tools. There it will be beautified

Hi, a late response but duty called:)

Ceated this file to work with as start for a custom css, tested it and works so far. To be edit as the design needs off course. Now diving into the rem values to understand this better.

* Default styles for various elements */
body, p, h1, h2, h3, h4, h5, h6, a, li, span {
    font-family: '.......', sans-serif;
}

/* Devices larger than 1024px */
@media (min-width: 1024px) {
    body {
        font-size: 16px;
    }
    p {
        font-size: 16px;
    }
    h1 {
        font-size: 48px;
        font-weight: 700; /* Font weight 700 for H1 */
    }
    h2 {
        font-size: 42px;
        font-weight: 700; /* Font weight 700 for H2 */
    }
    h3 {
        font-size: 32px;
        font-weight: 600; /* Font weight 600 for H3 */
    }
    h4 {
        font-size: 24px;
        font-weight: 500; /* Font weight 500 for H4 */
    }
    h5 {
        font-size: 22px;
        font-weight: 500; /* Font weight 500 for H5 */
    }
}

/* Devices between 768px and 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
    body {
        font-size: 16px;
    }
    p {
        font-size: 16px;
    }
    h1 {
        font-size: 36px;
        font-weight: 700; /* Font weight 700 for H1 */
    }
    h2 {
        font-size: 32px;
        font-weight: 700; /* Font weight 700 for H2 */
    }
    h3 {
        font-size: 28px;
        font-weight: 600; /* Font weight 600 for H3 */
    }
    h4 {
        font-size: 22px;
        font-weight: 500; /* Font weight 500 for H4 */
    }
    h5 {
        font-size: 20px;
        font-weight: 500; /* Font weight 500 for H5 */
    }
}

/* Devices smaller than 767px */
@media (max-width: 767px) {
    body {
        font-size: 16px;
    }
    p {
        font-size: 16px;
    }
    h1 {
        font-size: 32px;
        font-weight: 700; /* Font weight 700 for H1 */
    }
    h2 {
        font-size: 26px;
        font-weight: 700; /* Font weight 700 for H2 */
    }
    h3 {
        font-size: 24px;
        font-weight: 600; /* Font weight 600 for H3 */
    }
    h4 {
        font-size: 20px;
        font-weight: 500; /* Font weight 500 for H4 */
    }
    h5 {
        font-size: 18px;
        font-weight: 500; /* Font weight 500 for H5 */
    }
}

Hi Robert

It is superfluous:

And Helix is based on Bootstrap. Therefore, it is better to use bootstrap breakpoints.

Here are all bootstrap breakpoints

/*Breakpoints*/
/* Desktop First */
@media (max-width: 1399.98px) {}
@media (max-width: 1199.98px) {}
@media (max-width: 991.98px) {}
@media (max-width: 767.98px) {}
@media (max-width: 575.98px) {}
/* Mobile First */
@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}
@media (min-width: 1400px) {}