All comments

• 

  R.• 60

  @robjuh

  Submitted almost 3 years ago

  Hello everyone.

  Completed my first project, any kind of feedback and suggestions are welcome.

  Cheers!

  

  Stat Preview Card - My first project

  2

  1

  0

  

  jeepitou• 35

  @jeepitou

  Posted almost 3 years ago

  Great work, I like your "boilerplate" in the css to remove all the default margin and padding. Maybe you could put it in a separate css file to keep the file size smaller?

  Other than that I noticed you rewrote the "Companies/templates/queries" in uppercase. You can do that in CSS with text-transform: uppercase;

  Grats!

  1

  This comment has received 1 replyShow
• 

  duartrosar• 70

  @duartrosar

  Submitted almost 3 years ago

  Hello, everyone! This was my first project here and I had lots of fun. My question is about the text formatting as in, in how many lines the text is display as, or, where the lines break. I tried a few things like using the white-space property and the html <pre> tags. I'm not looking for a super detailed answer(although those would be greatly appreciated ) , just some pointers as to how I could've done it. So my question is, how could I have have achieved the same result without using the <br> tags? Thank you so very much for your time!

  Here's my html:

  <div class="body">
  <p class="p-main">
                    Discover the benefits of data<br />
                    analytics and make better decisions<br />
                    regarding revenue customer<br />
                    experience, and overall efficiency.
                  </p>
  <p class="p-main-large">
                    Discover the benefits of data analytics and make <br />better
                    decisions regarding revenue customer<br />
                    experience, and overall efficiency.
                  </p>
                </div>
  

  Then, I have a media query that "swaps" from one paragraph to the other when it gets to a certain size, by using the display property. I'm not proud of this solution, but I did what I could.

  My sass

  .p {
    &-main {
      color: $secondary-white;
      line-height: 1.5;
      // I really don't like this solution to obtain the right text formatting
      // See mark up*
      &-large {
        display: none;
        color: $secondary-white;
        line-height: 1.5;
        @include mq("huge") {
          display: block;
        
        }
      }
      @include mq("huge") {
        display: none;
      }
    }
    &-stats {
      color: $tertiary-white;
      text-transform: uppercase;
      margin-top: 8px;
    }
  }
  

  

  Mobile first using Sass

  3

  1

  0

  

  jeepitou• 35

  @jeepitou

  Posted almost 3 years ago

  I agree with @AgataLiberska. I just did this exercice and didn't use any <br> (altough I did think about it to be honest).

  What I did is setup the font-size and margin/padding to have the line break at a very similar point.

  I did have to do separate CSS for desktop&mobile, but I think my solution is a bit less hacky than yours.

  Other than that, great work :)

  0
• 

  George Al Ismail• 200

  @maotao11

  Submitted almost 3 years ago

  Feedback Appreciated!

  

  Mobile First design, Vanilla CSS & HTML5

  2

  1

  0

  

  jeepitou• 35

  @jeepitou

  Posted almost 3 years ago

  Hey, I'm also a newbie on this platform and took a look at your solution. I think your using first-child and nth-child way too much in your css. That must have been pretty hard to keep up with what your actually editing? first-child/nth-child is probably useful in some situation, but I think a class with a more descriptive name would have been better here.

  Other than that, result looks great!

  0

  This comment has received 1 replyShow