Shape dividers shrinks on smaller screens

3 replies · opened Jul 2, 2021

JJaySmokeJul 2, 2021

Hi,
I was wondering why the shape dividers shrink when you resize the browser? It doesn't cover/fill the div like a background image would. Can this be fixed? Because the shrink can disrupt design esp on smaller devices.

SSemicolon WebSTAFFJul 2, 2021

Hello,

Shape Dividers are not Background Images but is displayed as SVG which provides more control on their appearance and color. This is the Default Behavior of the Shape Dividers. You can consider use the Responsive Classes to use different widths for the Shape Dividers on different devices. Example:
[ch_pre type="css"].device-lg .shape-divider.custom-shape-divider svg {
width: calc( 100% + 1.3px );
}

.device-sm .shape-divider.custom-shape-divider svg {
width: calc( 150% + 1.3px );
}[/ch_pre]

Make sure that you add the .custom-shape-divider Class to the .shape-divider Element. The Responsive Classes are as follows:

.device-xl – Class for Large Devices >=1200px

.device-lg – Class for Medium Devices >=992px to 1199px

.device-md – Class for Tablets

.device-sm – Class for Landscape Mobiles or Phablets.

.device-xs – Class for Portrait Mobiles

You can add these Custom CSS codes in the css/custom.css File.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

JJaySmokeAug 11, 2021

Please would like to know if this issue was fixed in the latest update before I download?

SSemicolon WebSTAFFAug 11, 2021

Hello,

This was never an issue. This is the default behavior of the Shape Dividers, so this approach is preferred and has been adopted by most users. So we currently do not have any plans to change this. Please consider using the Custom Solution above. Additionally, you can check the Latest Changelog here: http://docs.semicolonweb.com/docs/changelog/version-6-5-2/ .

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard