I already had the HTML set up from another bit of work, so I’d just add the CSS. When I first got into it I figured I’d just work with everything all together. NOTE: to keep the CSS easy to read, the demo pages only work in Chrome. Ok, so now we understand the problem, let’s start coding! branches should shrink faster than the author). After a little thought and discussion we decided that the branches should be more flexible than the author (i.e. Ultimately only the author and branches should be “flexible.” Everything else should always be completely visible. branch details (source, destination and an arrow between them).The pull request header (known as PRH from now on) has X main sections: So we don’t need to talk about what was there, we’re starting from scratch. Nothing else relies on this piece of code and I had full control of how to implement this part of the feature (with lots of feedback from my fantastic colleagues!). I was fortunate enough to be able to throw away all existing HTML and CSS. Previously we were’t able to expand a branch name fully even though there was enough space for it. Obviously it’s got a ways to go, but this little bit is done! The main point is that we utilise all of the space available to us. Let’s take a look at what it’s currently like:Īdding flexbox is part of a much larger chunk of work, so my “finished product” looks like this: Today I spent some time implementing flexbox on our pull request page, specifically in the header. Well, the time has come!Īs you might know, I work for Atlassian on the Bitbucket Server product. That was a practice round because I knew I needed to use flexbox at work in the future. I recently wrote about using the flex-box rule in CSS. Our kitchen cooks up the most authentic Vietnamese food in all of London.CSS: Flexbox in action - Bitbucket Server pull request header ![]() Unlike in the solution code where they go from being a row to a column as the browser resizes. This did make it so the first set of gallery images (food) did not overlap with the second gallery images (team), but the team images stayed in a column even when the screen was wide enough to allow them to spread out in a row. ![]() I also tried making another website, and implementing line for line the same HTML and CSS rules as the solution. Hi the solution code does not use media queries, it only uses flexbox. However I am still curious on how to implement the code in the solution, in which the gallery images shift from a row to column as the browser resizes.īackground-image: url('background_image.jpg') The best solution I’ve come up with is to set the services images to overflow: hidden and the staff images to nowrap, this prevents images from either gallery from overlapping with any other elements. ![]() I changed my measurements throughout CSS to rem, however that did not solve the problem. Samantha Jones, Marketing & Client Relationsįont-family: 'Montserrat', Tahoma, sans-serif įont-family: 'Open Sans', Tahoma, sans-serif We bring together the highest calibre of graphic and website designers, as well as web developers, to provide our clients with an all-inclusive, industry-leading service. I’ve tried just about everything and also had a look at the solution code, but I can’t figure out how to prevent the containers from overlapping each other when the browser is minimised (I’m using Google Chrome). I’m working on the challenge project, company homepage with flexbox:
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |