How to reposition images at a higher...

User 1570522 Photo


Registered User
40 posts

Hi all, sorry to be a pest but I'm doing my first site in FF. I've constructed a portfolio page and it's all fine at my mobile breakpoint. However, I can't get the images to reposition into multi-image rows at higher breakpoints. I'm sure it's something obvious but I'm afraid I'm missing it. Can anyone enlighten me please? The page in question is at http://www.unlimitedmarketing.net.au/test_sites/jaspa/portfolio.html. Many thanks in advance!
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Hi Franko,
If you could zip up your project file and pop it into your dropbox (or similar), we can take a look at it. It seems, though, that you have a 12-span column for each image, and that may be why they don't reposition.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 1570522 Photo


Registered User
40 posts

User 2699991 Photo


Registered User
4,782 posts
Online Now

franko wrote:
Hi all, sorry to be a pest but I'm doing my first site in FF. I've constructed a portfolio page and it's all fine at my mobile breakpoint. However, I can't get the images to reposition into multi-image rows at higher breakpoints. I'm sure it's something obvious but I'm afraid I'm missing it. Can anyone enlighten me please? The page in question is at http://www.unlimitedmarketing.net.au/test_sites/jaspa/portfolio.html. Many thanks in advance!


The problem is you have each image in a column which is also in a row.

what you need to do is move the images into 1 column (the top one Column-3) then to the left of the first breakpoint set the column to position = flex

display = row
wrap = wrap
justify = space around (or space-between whichever you prefer)
other settings leave alone

By doing it that way the images will automatically fit into the column either next to each other with space around or stacked when the column has no more space available on the screen size.
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
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

other settings leave alone

Actually make the column flex bit
items = center if you prefer because you have an image that is longer than the others

Good God I just seen the widths 320% & max width 320px

Starting at the left of the lowest breakpoint
set the width to 100%
maximum width to 250px

to the right of the next (blue breakpoint)
set the width to 100%
maximum width to 220px

to the right of the last blue breakpoint
set the width to 100%
maximum width to 240px

play around with top margins if you want thats up to you, how you think it looks best
Good Luck
Wayan In Deepest Darkest Indonesia
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
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 1570522 Photo


Registered User
40 posts

Thanks Wayan. It's the end of the afternoon here now so I'll give it a go tomorrow. I haven't got my head around Foundation yet, let alone Foundation Framer and all this new stuff like Flex and Flexbox is still a grey mist to me.

And Indonesia isn't so deep and dark. Indonesian is my favourite cuisine.
User 2699991 Photo


Registered User
4,782 posts
Online Now

franko wrote:
Thanks Wayan. It's the end of the afternoon here now so I'll give it a go tomorrow. I haven't got my head around Foundation yet, let alone Foundation Framer and all this new stuff like Flex and Flexbox is still a grey mist to me.

And Indonesia isn't so deep and dark. Indonesian is my favourite cuisine.


It is over 5 hours return journey to the nearest internet cafe,, Surrounded by jungle and halfway up a mountain, with no roads,, I call that deep
Maybe what you should be doing is looking around foundation framer try out some of the things for a couple of weeks get to know what things do before jumping in and trying to create a proper web-site, it will be time well spent believe me

Anyway for now take care &all the best, Wayan in deepest cloudy raining Indonesia
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
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 1570522 Photo


Registered User
40 posts

Wayan, that's pretty deep and dark. Infatuated with 'Apocalypse Now' or on the run from the cops back home? :) I'd pictured you sitting in an open indoor/outdoor style place in Bali rather than in the jungle. How do you work there - satellite connection?

Thanks for your help. Got it pretty much sorted now; just got to tidy up a bit. I was overthinking the columns and rows thing; didn't have those when I learned HTML (V3.0) way back. Since then I've been using wysiwyg drag n drop design software (Netobjects Fusion - beta tester to ver 2015) but now I need to make my sites responsive there's a whole new bunch of stuff to learn. Still having fun, though.
User 2699991 Photo


Registered User
4,782 posts
Online Now

franko wrote:
Wayan, that's pretty deep and dark. Infatuated with 'Apocalypse Now' or on the run from the cops back home? :) I'd pictured you sitting in an open indoor/outdoor style place in Bali rather than in the jungle. How do you work there - satellite connection?

Thanks for your help. Got it pretty much sorted now; just got to tidy up a bit. I was overthinking the columns and rows thing; didn't have those when I learned HTML (V3.0) way back. Since then I've been using wysiwyg drag n drop design software (Netobjects Fusion - beta tester to ver 2015) but now I need to make my sites responsive there's a whole new bunch of stuff to learn. Still having fun, though.


Just staying in my wifes village help take care of new-born baby
normally in Bali is normal living,, this is camping :D
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
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

franko wrote:
Wayan, that's pretty deep and dark. Infatuated with 'Apocalypse Now' or on the run from the cops back home? :) I'd pictured you sitting in an open indoor/outdoor style place in Bali rather than in the jungle. How do you work there - satellite connection?

Thanks for your help. Got it pretty much sorted now; just got to tidy up a bit. I was overthinking the columns and rows thing; didn't have those when I learned HTML (V3.0) way back. Since then I've been using wysiwyg drag n drop design software (Netobjects Fusion - beta tester to ver 2015) but now I need to make my sites responsive there's a whole new bunch of stuff to learn. Still having fun, though.


I have a number of videos that show a lot of the basic stuff (RSD wth FF, so they are relevant) The problem is that I am rebuilding & re-branding my old site, & moving the hosting service. But the videos I can place on Youtube if you think you might find them useful. Drop me an email (look on my profile) & I will send you a list of what I have,, you can them let me know which ones you might want follow along with.
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
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/

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.