Skip to content
OverviewSolutions
2
Comments
3
jeepitou
@jeepitou

All comments

  • jeepitou•35
    @jeepitouPosted over 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
  • duartrosar•70
    @duartrosarSubmitted over 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
    jeepitou•35
    @jeepitouPosted over 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
  • jeepitou•35
    @jeepitouPosted over 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