I am having a go on working with Flexbox. I had 2 days of online courses and trying to come to grasp with the techniques I am still struggling. I uploaded my work here: https://codepen.io/Corobori/pen/poEwaRO (as it is my 1st also with codepen I hope I used it as it should be, let me know if I could have done better).
I am having issues with:
The right side of the top of screen. The section with the pink background should go underneath the section with the orange back ground and align to the right of the background image. And on a smaller screen it just disappears.
At the bottom of the screen the text should go underneath the icon and not beside it.
Unfortunately you changed the codepen while I was looking at so the following fixes will not work properly now. I will have to have another look now that you have changed it.
The fixes that would have fixed your top row are theses extra rules.
I suggest that when you post a codepen you donāt update it as it makes all the effort I put into it worthless as the code is no longer the same. What you should do is just fork the codepen into a new version so that you can work on the new version but leave the original intact. If you keep changing it we will never be able to help you
As wake689 mentioned you are nesting too many flexbox items which makes it hard to debug as you have to keep going up the tree to the parent and then back down to the child to work out whatās going on.
If you want full width items then you would need to set the flex item (a child of a flexbox) to take up 100% of the space so that they start on new lines (flex:1 0 100%) or set the parent to display as a flex-column. You are also forcing heights on items that donāt need height and are indeed wrong for their content. Donāt use heights unless you have a real need.
Looking at your new page Iām not sure what you want to accomplish now so if you can explain the look iāll try and take another look
Thank you for the tips on CodePen, Iāll do it next time.
Well what I want to achieve is the following (numbers are referencing the print screen found below):
0: I have got a picture I need to display as a background (randomly choosen from a set of pictures that I am loading on the server side, not a problem) 1: A logo on the top left (when passing over a white logo will be displayed) 2: On the top right the navigational menu (2a) for social network logos and the email icons and right below an internal navigational menu (2b) (where the āAlumno Profesor Colegioā part should slide across when hovering the āIngresoā text, I personally donāt like this idea, especially for mobile device so I am thinking of saying no to the customer) 3: A text on 3 lines 4: A public navigational menu
For some reason I thought Flexbox would be helpful. By the way the project is based upon Bootstrap 3.3.7.
When I planned it I thought of splitting the whole things in 3 parts:
T: The top part where on 2 different columns I would put in the 1st the logo (#1); and in the 2nd nesting my 2 navigational menus (the social network one 2a, and the internal menu 2b ) M: The middle part: #3 B: The bottom part: #4 (Your suggestion fixed my issue)
Perhaps you have got a better idea on how to get what my client wants.
Does that picture cover the whole page or just the sections you show? If its the whole page then it would be better as a background image to the body and fixed in place. It looks odd to me with 20px of margins around the image and would look neater with the image flush to the viewport.
How wide is the design as you have set it to be as wide as the viewport and on my screen thatās over 2500px wide so I have miles to go to select anything in the menu? If thatās what you want then thatās fine but just be aware there are even monitors wider than mine and maybe a max-width on the content would be appropriate. This does of course affect how any solutions will work as you will need a page container of sorts to control the max-width.
As that page is quite short in height it might be an idea to have it stretch the height of the viewport and have the footer on the bottom of the viewport as a sticky footer.
Yes flexbox will be helpful but bootstrap 3.3.7 will not be very helpful as it still uses the old floated layout methodology. If you have to use a framework then upgrade to boostrap4 which uses flexbox by default. If you can do without it then do it alone for an easier life.
The important thing is to logically divide the page and then work out how to mange it best as you have done with your drawings. Its ok to nest flexbox when needed but sometimes not everything needs to be a flexbox.
It looks you could do a main flex box wra set to column and have 3 rows (3 direct children). The last row is then easily pushed to the bottom of the viewport with a top auto margin when the parent has a min-height:100vh.
The first row could be a nested flex box with 2 direct children and spread to the edges in a number of ways (auto margins or justify rules).
The middle row needs nothing special as its already a child of a flexbox.
The last row you already have code for so would just need an auto top margin assuming yo have set the page wrapper as I mentioned.
If you can answer the questions above Iāll fork your pen and do a basic demo and see how things look
Ok, It might be better to have a max-width and 1900px in that case but you can play around with that later.
I have to go out for a couple of hours but I made a little start on the top section but I will return later to finish it off.
Feel free to fork and play around with it. Note that when using codepen you can link to your own https files from the settings panel as I have done. The html panel just contains the html that would be inside the body tag. Note that you had a stray style tag in the css panel that is not allowed.
There are also settings in codepen to had the most common frameworks if required. Only https assets will show in codepen now when using Chrome but other browsers will probably follow.
I was thinking about upgrading the Bootstrap but after looking at the number of pages I would have to update (it is redesign of an actual website) I decided not to, the time I should spend wouldnāt fit into the budget I am allowed on this project, that includes new functionalities, for both money and time. Weāre already running late, I had some personal issues and it took to the designer about 2 months just to send that top part of the home page (and an extra month for the bottom part of the HP and the inside pageās design).
Wow, thanks a lot. It looks great. I had a look at it and will be reviewing it in more details later on. As far as the small screen is concerned I havenāt been told what to do but I guess what you done looks fine.
Would you mind explaining me the sliding effect you created for the menu ? As far as I understood it originally sits outside the visible part and when passing over the mouse it is sliding in from the right.
The small screen was just for example as the type of thing that can be done. Feel free to adjust as required. Remember you have to work with the html you have so you canāt just imagine a new design for small screen unless that fits in with the html and css you use.
Yes thatās basically it.
I nested the slide items in a nested ul and placed them absolutely and with transform off to the side of the viewport so they were hidden (the parent has overflow:hidden so you canāt see it). When you hover the list item the css transforms the menu into view.
.trigger:hover > ul {
transform: translateX(-30px);
opacity: 1;
}
It should work on most mobiles as they treat a first touch as hover but you will have to click elsewhere on the page to make it hide. It will probably need testing on a real device once its up and running on a standalone page just to make sure its usable. (Codepen should not be relied on when testing on an actual mobile device as it contains everything in an iframe and is not how the page will really look. Its fine for desktop and basic testing.)
Yes, its because you have just sized it using padding and as the icon is a different size it doesnāt make a circle. I would force the issue and set a suitable width and height like this:
This code should follow the original rules and does not replace but over-rides which is necessary due to the comments below.
One thing that is confusing is that you used the class of āmenuā in different places and indeed on nested items which means you canāt change .menu styles without changing everything else. It would have been better to keep all menus separate as there wasnāt really any commonality between them apart from the display perhaps.
If you do have a group of styles that you want to use over and over again (like a utility class) then make a comment in the css not to add or change this rule and to use a separate class for any changes.
