Menu icon Foundation

Designer | Zoetermeer, Netherlands

I'm a Publisher and also a developer of an online magazine

My Posts



My Comments

Rien Kok commented on Rien Kok's post almost 2 years

Thanks Rafi,
You are right, but I don't know why the 'xlarge' breakpoint is not recognized. The inspector in my browser (firefox developer edition)  shows this:

The generated app.css shows this:
@media screen and (min-width: 75em) {
.xlarge-align-left-bottom {
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-align: end;
align-items: flex-end
}
}
I changed the class 'large-align-right-bottom' to 'large-align-left-top' and the class 'xlarge-align-left-bottom' to 'xlarge-align-right-bottom'.
<div class="hero-section grid-x small-align-center-middle medium-align-right-top large-align-left-top xlarge-align-right-bottom">
...
</div>
On breakpoint 'large' with a viewportsize of 1178px, the class 'medium-align-right-top' is active instead of the class 'large-align-left-top'.
On breakpoint 'xlarge' with a viewportsize of 1302px, the class 'xlarge-align-right-bottom' is active which is correct!

So, when I make the viewport smaller (use a smaller breakpoint) it went wrong?
I defined my breakpoints and classes in a file 'custom-settings.scss' and included that file directly after 'setting.scss' in app.scss.
I use the following breakpoints (custom-settings.scss):
// 2. Breakpoints
// --------------

$breakpoints: (
small: 0,
smedium: 560px, // 35rem
medium: 768px, // 48rem
large: 1024px, // 64rem
xlarge: 1200px, // 75rem
xxlarge: 1440px, // 90rem
);
$print-breakpoint: large;
$breakpoint-classes: (small smedium medium large xlarge xxlarge);

//responsive positioning

.small-align-left-top {
@include flex-align();
@include breakpoint(small) {
@include flex-align($x: left, $y: top);
}
}

.small-align-left-middle {
@include flex-align();
@include breakpoint(small) {
........
 

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Rien Kok's post almost 2 years

Thanks Rafi,
You are right, but I don't know why the 'xlarge' breakpoint is not recognized. The inspector in my browser (firefox developer edition)  shows this:

The generated app.css shows this:
@media screen and (min-width: 75em) {
.xlarge-align-left-bottom {
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-align: end;
align-items: flex-end
}
}
I changed the class 'large-align-right-bottom' to 'large-align-left-top' and the class 'xlarge-align-left-bottom' to 'xlarge-align-right-bottom'.
<div class="hero-section grid-x small-align-center-middle medium-align-right-top large-align-left-top xlarge-align-right-bottom">
...
</div>
On breakpoint 'large' with a viewportsize of 1178px, the class 'medium-align-right-top' is active instead of the class 'large-align-left-top'.
On breakpoint 'xlarge' with a viewportsize of 1302px, the class 'xlarge-align-right-bottom' is active which is correct!

So, when I make the viewport smaller (use a smaller breakpoint) it went wrong?
I defined my breakpoints and classes in a file 'custom-settings.scss' and included that file directly after 'setting.scss' in app.scss.
I use the following breakpoints (custom-settings.scss):
// 2. Breakpoints
// --------------

$breakpoints: (
small: 0,
smedium: 560px, // 35rem
medium: 768px, // 48rem
large: 1024px, // 64rem
xlarge: 1200px, // 75rem
xxlarge: 1440px, // 90rem
);
$print-breakpoint: large;
$breakpoint-classes: (small smedium medium large xlarge xxlarge);

//responsive positioning

.small-align-left-top {
@include flex-align();
@include breakpoint(small) {
@include flex-align($x: left, $y: top);
}
}

.small-align-left-middle {
@include flex-align();
@include breakpoint(small) {
........
 

Posts Followed

Following

  • No Content

Followers

  • No Content