I’ve started to do a Our Team page with my own design but I would like to do my Our Team page like this Website http://www.rnaplant.co.uk/our-people/.
This is what I’ve done can you please help me make my contact page like this website mentioned above please. Please use this link to view what I’ve done http://idea1-com.stackstaging.com/
For each row, you need to use display: block on the element.
You can also try using columns (or maybe even flex boxes) for the side-by-side look. https://www.w3schools.com/cssref/css3_pr_columns.asp
I recommend using Mozilla Firefox for its Developer Tools so you can inspect webpages and view the code in a web console.
I would like to make it like RNA plant website how can I do that?. Would you be able to have a look at their website using the link above can you help me to achieve something similar to their website?
@lesbrarianism, when would you use the columns property, instead of flexbox or the grid? I never knew about the columns property until today, so thanks a lot for mentioning it.
I would like to create my page like RNA plants website can you have a look at the link mentioned earlier it looks good on desktop and on phone it’s responsive
@OwainBennett, I would put each photo and paragraph pair inside a div. Then turn that div into a flexbox. After this make sure the items are starting at the top of their respective flexbox section.
Sorry I don’t understand what I need to do can you help me please further and advise me what I need to do step by step please.
@OwainBennett, you need a couple of these flexboxes in your project. You should also crop the images because they look stretched. Also, resizing them to a smaller resolution will make them load faster.
Edit: Link changed to final version.
Can I just copy and paste that and add more information for the other staff members?. How can I make it like RNA have done ? Can you please help me with that?
This one has two sections. You can continue on with this one.
Edit: Link changed to final version.
I like what you have done but how have RNA got the colours and boxes around the text. How can I get the text aligned like RNA have done on a desktop and they align underneath each other on a phone.
@OwainBennett, add a media query at the bottom of the CSS, like this one. I set the point at which this change takes place at 600px, but you can choose what you think is more appropriate.
Btw, the website you listed has multiple media queries for different devices. You can add more if you want for a better user experience. Just copy the one that I did and change the values.
One more thing, resize and crop the images so that they don’t look weird. In the media query section, I had to set the height to 300px, instead of 100%, because the picture would then be very long.
How can you add the media queries for different devices like RNA have done and the different colours around the text in a box how can that be done?. Can you please help me with that ?
Owain, @TazExprez, and many other members of the freeCodeCamp community have helped you so much, and given you a lot of useful advice. Without doing your work for you, we cannot help you further.
This community is aimed at helping developers learn programming related content. It is not a community for customers to find developers who will do work for free.
So, seeing as almost all of what you have been asking has been trivial in the freeCodeCamp context, I recommend you take some time to work through the freeCodeCamp curriculum to learn how to do what others have advised.
Then, after learning on the curriculum, if you still are missing something, use Google (or equivalent) to do your own research into the topic/tools.
Lastly, if there is just that extra thing that has been eluding your studies and research, ask on the forum.
This is the basis of the Read-Search-Ask method we encourage here.
It is excellent you have an interest in programming/web-development, but if you do not want to learn something for yourself, use the numerous other communities specifically tailored for you to solicit experienced services, and they will do it for you.
Thank you.
As far as I know, columns will simply split elements into any given number of columns. A grid’s default is more of a grid appearance (kind of like a table), which would also allow manipulating elements into columns. Same idea applies to flex boxes, except flex boxes are meant to be flexible with values based on the display width. Most of this I learned from reading through w3schools’ CSS Reference. They have various templates that also give you a good idea of what the raw and rendered code looks like.
Some templates for reference:
https://www.w3schools.com/css/css_templates.asp
https://www.w3schools.com/css/css_rwd_templates.asp
Thanks for the explanation. Those templates are pretty nice! Thanks a lot for this!