Best CC users,

I show in the screenshot to see how the CSS Grid layout I have designed in both screens. In the mobile and tablet screen view with 2 columns. In the display of a laptop and desktop screen is equipped with 4 columns. In the display of a laptop screen and desktop screen I have the correct formatting. When I use the slider slide for a smaller screen of tablet or mobile screen to the completely wrong side on.

Question 1
Know here someone come up with a solution for a correct formatting of the display of tablet and mobile?

Question 2
I've already tried everything to rows in the insert into the CSS Grid, but it's really not. Is there a better solution?

I hope that here are people who know something about CSS Grid. I know how the system works so am there only started. Would need to be easy to work with, but unfortunately not so.

Kind Regards
Stephane

Phill Das you are an very good man and see that you design websites with CSS Grid

Ha ha. Love it.

Unfortunately I cannot open your files as not upgraded to the newest version of SD3. I currently only have 2 websites on SD3 at the moment so just using the last stable version I know of for small updates.

Phil Dias,

Can you still see how you can solve it see the screenshots how it should really look on all screens. I have installed the Site Designer v3.0 and can therefore view your projects there as well.

I would really appreciate that you can help me in the right direction and that I can also learn the possibilities of CSS Grid (Flexgrid). He is concerned with those sections "training" and "skills" as well as the placement of those stars see previous long post.

https://www.coffeecup.com/forums/site-d … post286349
https://www.coffeecup.com/forums/site-d … post286430

Kind regards
Stephane

I installed the new version and had a quick look at your files. There are some big mistakes so I will try and look at it tonight and get a solution for you. Regards

Ok Stefke, I have looked at your file and corrected it.
Unfortunately you were making some fundamental errors.
For styling to work, you need to style at the MOBILE BREAKPOINT.
You hadn't enabled the display:grid either so all you css grid work was in fallback mode so didn't work.
I have added the grid areas and reset your styling.

If you really want to be able to do this on your own you need to do some studying with the coffeecup tutorials as you are making big errors which will always hold you back.

Have a nice week,

Regards

Phil you are an angel
but it will be like talking to a brick wall

Phil Dias,

Is there an other solution that responsive is to. An flex container for the header "Vaardigheden" and an flexgrid for all the items with the stars?.
How can I design that. I mean how much containers?
Kind regards
Stephane

I would have found it appropriate if you had thanked Phil for the corrections he made, before asking him to make changes.

I am not sure what you are asking me to do here.