fbpx

Astroid 2.4 Landed with Joomla 4 Compatibility Download Now

Welcome, Guest
Username: Password: Remember me

TOPIC: Breakpoints modify

Breakpoints modify 7 months 2 weeks ago #20257

  • vsdmub
  • vsdmub's Avatar
  • Offline
  • Senior Member
  • Posts: 72
  • Karma: 0
Hello every one. I've realized that Astroid use 4 brakepoints: 576px, 768px, 992px and 1200px. Can I modify them? For example 500px, 700px, 900px and 1300px? There is an easy way to do that?
The administrator has disabled public write access.

Breakpoints modify 7 months 1 week ago #20294

  • hitesh99raj
  • hitesh99raj's Avatar
  • Offline
  • Administrator
  • Posts: 60
  • Thank you received: 20
  • Karma: 4
Hi,
Yes you can modify default bootstrap's breakpoints and containers by adding below scss variables and modify as you want into template's variables_override.scss file.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

Please let us know if you need more help. Thanks for using Astroid Framework.
Last Edit: 7 months 1 week ago by hitesh99raj.
The administrator has disabled public write access.

Breakpoints modify 7 months 1 week ago #20359

  • vsdmub
  • vsdmub's Avatar
  • Offline
  • Senior Member
  • Posts: 72
  • Karma: 0
Thank you. I edited the next file: \templates\astroid_template_zero\scss\zero\variables_override.scss

I inserted the next code:

$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 718px,
lg: 944px,
xl: 1200px
) !default;

$container-max-widths: (
sm: 540px,
md: 670px,
lg: 914px,
xl: 1140px
) !default;

It works well inside the Category blog joomla page, but it doesn´t work well in JD Builder page.

This is the Joomla category blog working well:
astroid.joomla.com/blog-2.html

This is the JD Builder home page (with Latest News Joomla module) working bad:
astroid.joomla.com/


Each one has three columns. You can open one link in a tab and the other one in another tab. Then you can resize manually the window of your browser and compare for yourself. Between 944px and 992px, the columns in JD Builder are very thin. Between 718px and 768px the column is thinner, also. It seems that there are other breakpoints and container max width in JD Builder.

Thank you for your time and support.
The administrator has disabled public write access.
Moderators: chandandeep
Time to create page: 0.227 seconds
Cron Job Starts