Disabiling breakpoints refresher

User 3156750 Photo


Guest
178 posts

hi all!

disabiling breakpoints does not affect the displays, is that correct?

using foundation. Currently, the two breakpoints that are coverered work well on mobile phones but are drastically different on my laptop :(:(:(:(:(:(
User 2699991 Photo


Registered User
5,426 posts
Online Now

Of course disabling breakpoints effects the displays
If you disable breakpoints then any styling you do works from the lowest position on the slider regardless of where you position it. Foundation works mobile first. There are some things you can style that can be ok for all sizes of devices using min max widths on containers for instance can be done for some things with breakpoints disabled.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/index.html
User 2699991 Photo


Registered User
5,426 posts
Online Now

I have to admit I am more than a little confused though, here we are almost 2 years since your first appearance on this forum, with a website (125 pages apparently already completed) and you are confused about breakpoints,

Are you meaning you disable A breakpoint (not all breakpoints) So if you disable A breakpoint then any styling only happens between That breakpoint and the next one UP , any styling applies to just the space between that breakpoint. (previous or after not effected)

So the thing is about breakpoints and your layout (REGARDLESS OF THE FRAMEWORK)_ is that you start with ALL BREAKPOINTS disabled, right at the beginning of a project, so that you can apply styling to the layout that
CAN BE applied from lowest widths to the highest width (and possibly applying the styling to all elements of that type (therefore not needing to add a class name,(until perhaps some individual styling for a particular element is required.
This is basic web developer stuff.

Thereafter, you apply "ENABLE all breakpoints (DEFAULT mode) and you then concentrate on your design, moving the slider up (from lowest point) IF OR WHEN, your layout breaks, regardless of the position of the slider, you stop there, Take a deep breath and ask yourself a question (" CAN I MAKE A SMALL CHANGE TO MY LAYOUT (ELEMENT/LAYOUT (whatever looks broken or not right) which will make it look ok. If the answer to your question is yes, then apply it, and test it, (move slider back and then up again. If the answer is NO, then add a new breakpoint and make the changes necessary to get your design looking as it should. Continue and repeat as necessary all the way up.
If you need add more than a couple of two breakpoints (you can have up to 10 (including the 2 default breakpoints)within site designer. If you need more than that then it's probably time to start a new hobby, or use the HTML editor to build your website (you can have as many as you need), or even non at all using the latest CSS thingies along with CSS Grid which eliminate the need for media queries altogether.

You can use the CSS GRID components within Site Designer using some trickery boo, which can also help your design without adding unnecessary breakpoints, but that is really advanced stuff.








Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/index.html
User 3156750 Photo


Guest
178 posts

My site works correctly on mobile, however over 1280 PX nothing appears correct. I thank you for your sentiment, and all I am trying to do is correct the larger size for laptops using the foundation framework.

Its A Kind Of Bali Magic wrote:
I have to admit I am more than a little confused though, here we are almost 2 years since your first appearance on this forum, with a website (125 pages apparently already completed) and you are confused about breakpoints,

Are you meaning you disable A breakpoint (not all breakpoints) So if you disable A breakpoint then any styling only happens between That breakpoint and the next one UP , any styling applies to just the space between that breakpoint. (previous or after not effected)

So the thing is about breakpoints and your layout (REGARDLESS OF THE FRAMEWORK)_ is that you start with ALL BREAKPOINTS disabled, right at the beginning of a project, so that you can apply styling to the layout that
CAN BE applied from lowest widths to the highest width (and possibly applying the styling to all elements of that type (therefore not needing to add a class name,(until perhaps some individual styling for a particular element is required.
This is basic web developer stuff.

Thereafter, you apply "ENABLE all breakpoints (DEFAULT mode) and you then concentrate on your design, moving the slider up (from lowest point) IF OR WHEN, your layout breaks, regardless of the position of the slider, you stop there, Take a deep breath and ask yourself a question (" CAN I MAKE A SMALL CHANGE TO MY LAYOUT (ELEMENT/LAYOUT (whatever looks broken or not right) which will make it look ok. If the answer to your question is yes, then apply it, and test it, (move slider back and then up again. If the answer is NO, then add a new breakpoint and make the changes necessary to get your design looking as it should. Continue and repeat as necessary all the way up.
If you need add more than a couple of two breakpoints (you can have up to 10 (including the 2 default breakpoints)within site designer. If you need more than that then it's probably time to start a new hobby, or use the HTML editor to build your website (you can have as many as you need), or even non at all using the latest CSS thingies along with CSS Grid which eliminate the need for media queries altogether.

You can use the CSS GRID components within Site Designer using some trickery boo, which can also help your design without adding unnecessary breakpoints, but that is really advanced stuff.








User 2699991 Photo


Registered User
5,426 posts
Online Now

so if it doesn't look right at a particular break point, whether its laptop/desktop adjust the layout until it does, then move on upwards if it needs additional breakpoints then add one and adjust again.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/index.html
User 2699991 Photo


Registered User
5,426 posts
Online Now

what is your laptop screen size (in pixels)? I know there are hundreds of different modals and screen sizes, but just for starters, whats your laptop screen size in pixels. that then will determine which breakpoint your laptop falls within. So if it falls within the default breakpoint at 1027px then you position the slide at the actual start of that breakpoint, (1024 px) and then move the slider upwards keeping an eye on the layout, when and if the layout looks broken or wrong, then ask yourself the question as previous. if it cannot be corrected then add a breakpoint. etc etc. keep moving on upwards until it breaks again or looks wrong,, repeat
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/index.html

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.