Understanding Breakpoints

User 2896724 Photo


Registered User
10 posts

Hello,

I am having an issue understanding break points.

Is the basic idea that if you have 4 break points, you need to design four websites? I started using the software today and started with the larger site. However, once you move out of that breakpoint using the slider, the images i've selected don't show up at the lower resolutions, however the text does.

Sometimes when i am changing the settings for padding and margins, supposedly on the "small" resolution website, it doesnt show up on the small resolution breakpoint but does show up on the larger site (though i dont want it to). It seems like i am not selecting which breakpoint I am editing correctly.

What am i missing?
User 451981 Photo


Registered User
80 posts

It depends on which theme or framework you start with. Some are desktop down and some are mobile up. So in mobile-up you develop in the narrowest view and it all scales up. In the desktop-down mode, you develop in the widest view and it scales down. Also be careful with your classes for components. If you change the class name for an item for the different bps the contents of that component won't carry over. Take a look at this website that I am working on right now.
www.seedtech.ca
I started with the foundation portfolio framework. It has beak points at 640 and 1024. I moved the slider over to the 640 bp and made the website. When I slide the bp slider over to the right everything expands and the boxes rearrange themselves depending on the width of the screen.

The only thing I have to do is limit the size of the pictures in the max bp so that the pictures aren't more than 600 or 800 px wide. The pictures I am talking about are here: www.seedtech.ca/scrnseed.html If you move the width of your screen around you can see how the images and boxes resize themselves.
I hope this helps a bit
Raj
If you stand by,the ocean, it sounds like you are holding a conch to your ear.
User 122279 Photo


Senior Advisor
11,274 posts

You just make one website. You have to start with the phone size (the slider has to be to the left of the left-most breakpoint). Then you place the elements you need, and for such small sizes, they need to be positioned below each other, filling the width. When you're done, you move the slider up past the first breakpoint, and you probably want to make adjustments, maybe certain elements can go beside each other. Then at each breakpoint, you continue making the desired layout changes.
If you get stuck, there will always be someone here who can help you along.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.horgenhonning.net/
Component sharing for RFF, RBB, RSD and SD: http://www.horgenhonning.net/sharing/


User 187934 Photo


Senior Advisor
18,051 posts

Don't think of certain devices or widths. Make your site looks good at all points and you'll be fine. Keep break points to a min but don't be afraid to add them if you need it to make the page look correct a certain width.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/
User 2896724 Photo


Registered User
10 posts

Thanks for the comments.

Is it possible to have slighly different content based on a smaller breakpoint vs a larger one? I would like to limit the words used on the smaller design. Eg, if i had two paragraphs on the main site and one on the smaller one. Is that possible?
User 451981 Photo


Registered User
80 posts

Yes. What I would do is make the content the way you want it in the small bp. Then when you slide to the larger bp, change the class name of the paragraph or text to a different name and add in the extra text. That way your small screen text will stay as it was and the bigger screen areas with have the longer text.This is how I would do it. There are probably other ways or better ways, but this is what I do
Raj
If you stand by,the ocean, it sounds like you are holding a conch to your ear.
User 244626 Photo


Registered User
585 posts

Michael Gilchrest wrote:
Thanks for the comments.

Is it possible to have slighly different content based on a smaller breakpoint vs a larger one? I would like to limit the words used on the smaller design. Eg, if i had two paragraphs on the main site and one on the smaller one. Is that possible?


You could use Position>Display>None to "not show" one of the paragraphs at the smaller breakpoints.
User 2896724 Photo


Registered User
10 posts

Thanks guys, that sounds good. Different options. Thanks!
User 2896724 Photo


Registered User
10 posts

I am also having an issue where i am adding pictures, but they are only added to one breakpoint, despite the fact that the container has the same class name? Is there a way to move pictures from one breakpoint to the next? I have a slide show i am making and i have to add about 30 pictures three times, it seems cumbersome.

https://snag.gy/PUqcR4.jpg

https://snag.gy/fYkUbm.jpg


It also doesnt carry over the design rules...
User 122279 Photo


Senior Advisor
11,274 posts

To me it looks like you have added the place holders at the smallest width, but then moved the slider before you changed the place holders for the real images. ALL the contents have to be inserted at the small viewport, and if you move the slider, they will be there all along. With increasing width you may want to enlarge the images, and that is done in the settings at each breakpoint (starting from the narrow end!) as you move the slider towards the right.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.horgenhonning.net/
Component sharing for RFF, RBB, RSD and SD: http://www.horgenhonning.net/sharing/



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.