Skip to content
OverviewSolutions
19
Comments
16
Irina Lagutina
@FoxMalder-coder

All comments

  • Priyanka•380
    @cssbubbleSubmitted over 2 years ago

    I have all HTML issues are because of using Tailwind CSS cdn version. Is there any way I can purge the long css file any make it compact, so that I can avoid seeing these issues?

    Thanks

    Responsive room homepage with grid and flexbox

    2
    Irina Lagutina•490
    @FoxMalder-coderPosted over 2 years ago

    Hi! Then I use installed local tailwind for work, and then (on live site) use output.css file no error in HTML issues appeared.

    0
  • David Pokrajac•370
    @DavidPokrajacSubmitted over 2 years ago

    Definitely the hardest task in this project was making the span with left and right arrows fill the gap which is between the left edge of the article and the beginning of the left edge of the right picture in the fixed slide. Also I had problems with image sliding. I tried to put everything under 100vw and 100vh so my upper images are a bit stretched out.

    I would like to know how I could improve the aspect ratio of the images while trying to have everything under 100vh in height and 100vw in width. Also would like to be advised on how the span containing left and right button arrows which I created could fill the gap with its width, between the left edge of the article and the begnning of the left of the right picture in the fixed slide

    Home page using plain CSS

    1
    Irina Lagutina•490
    @FoxMalder-coderPosted over 2 years ago

    Hi! To make picture grow-up correctly use object-fit: cover and overflow: hidden. For positioning you could try: first 60% (wrap picture in div with width: 60%) and second 40% (left part), then set span left: 60%... It's not exactly numbers, just for example.

    1
  • Irina Lagutina•490
    @FoxMalder-coderPosted over 2 years ago

    Hi! Your slider changes only pictures not text. Logo on desktop is stretched. And also I'v suggest to use some transitional layout between 375px and 1440px

    1
  • Shonuff•280
    @TheShonuffSubmitted over 2 years ago

    Here is my solution. If anybody has some input on how to better manage the gird row height I would appreciate the input. My bottom row is slightly larger than the top row. If I adjust the height from the first grid that spans 2 rows it doesn't seem to affect the grid row proportionality.

    My javascript is super ugly. I feel like it's the equivalent of using a sledgehammer when a ball-peen hammer would have done the job. It works but...yeah. I look forward to looking through other solutions to see how they came to a solution. Cheers!!!

    Time Tracker Dashboard

    1
    Irina Lagutina•490
    @FoxMalder-coderPosted over 2 years ago

    Hi! To make grid row the same height use grid-template-rows: 1fr 1fr or repeat(2, 1fr). Also I'v suggest to use some intermediate grid between small screen and desktop, and center content on large screen. About js - first cut styling from js to css (h6.daily, h6.weekly, h6.monthly have same styling for passive state and active state - use one class for passive, for example, selector, and another one for active, for exemple, selectorActive; and then just toggle class in js). Another thing is that your doing the same in all three function - try to pass value (daily, monthly, weekly) inside just one function. p.s. strange to see camelCase in html...

    Marked as helpful
    1
  • Irina Lagutina•490
    @FoxMalder-coderPosted over 2 years ago

    Hi! Thanks for your feedback! I've see some little things on your's :) About design:

    • on desktop menu items have normal font-weight;
    • orange border on active thumbs not opacue;
    • in lightbox cross has white color in normal state; About functionality - if you use localsrotage on adding item first you need to check whatever this item allready in cart. If so, just correct quantity not adding another one.
    0
  • Florian Stăncioiu•610
    @florianstancioiuSubmitted over 2 years ago

    Any feedback is appreciated!

    I have some problem with the bottom background image for the desktop, even though I position it using background position to the bottom of the page, the image remains positioned with 50px up from the bottom. I used min-height:100vh on the body element and it works but I get a scrollbar.

    Mobile first design with plain CSS and Flexbox

    1
    Irina Lagutina•490
    @FoxMalder-coderPosted over 2 years ago

    One of posible solution is:

    1. Reset margin on body. Make it min-height: 100vh.
    2. Set just padding-top to main. Any other margin exept margin-right: auto and margin-left: auto set to 0 or not install at all. The other one:
    3. The same. And make body flex with center align and justify.
    4. Set all margin and padding for main to 0.
    1
  • Aneta•180
    @anetaanetteSubmitted over 2 years ago

    <I need JS advice> 😅 Hey everyone! This challenge was satisfying to complete because I simply really like the design. I know I could have improved a few details and make it more semantic but I just couldn't be bothered to spend more time on it as I keep thinking I should already code with Javascript. But at the same time I don't know how to start 🤣 This is a bit off topic but this website is great to meet people with similar experiences. I know the basics of JS and I feel stuck. It's like completely different things when it comes to using it for an actual project. Do you have any tips on this? Any advice will be useful 🙏 Thanks Aneta

    Fylo Data Storage Component

    2
    Irina Lagutina•490
    @FoxMalder-coderPosted over 2 years ago

    Hi! But this toddler is not driven by user... What exactly your want to code in JS? If you want user to be able to control this bar you need something like this... [MDN] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output) The basic idea: in html we have 3 element - progress with id (for example #space) with some value, 2 tags (span or whatever) with id (for example #used and #reserved, now it 815 and 185). In JS we find #space, take it value and write to #used and to #reserved (return 1000 - value). If you want to play with it, you need to add event listener to #space (to change #used and #reserved). Progress tag is hard to stylize. But change the digits on the page according to progress value is not so hard. I hope I'am no confused you)))

    Marked as helpful
    0
  • Irina Lagutina•490
    @FoxMalder-coderPosted over 2 years ago

    Hi! Page is not adaptive under 830px... And on desktop better limit content width by "max-width: 1110px"

    Marked as helpful
    0
  • Baby•100
    @favourproSubmitted almost 3 years ago

    It was fun creating this. By the way ..... Im having a few problems with the mobile view.... especially in the attribute section. It doesnt seem to be positioned properly. Ive tried everything i can but to no avail.

    Tesimonial grid section

    1
    Irina Lagutina•490
    @FoxMalder-coderPosted over 2 years ago

    Hi! You need to change "height: 90vh" to "min-height" and add some padding-bottom to body. And you haven't any grid... It's grid challenge, try some - it's funny and powerfull)))

    Marked as helpful
    1
  • Arun Kumar Singh•260
    @arunsingh009Submitted almost 3 years ago

    I used a grid here as I am a beginner that's why I am not satisfied with the work for this challenge. I tried my best for this Challenge, but I am unable to use that quotation image in this challenge and I was unable to position the cards mentioned in the design for mobile phones. If any suggestions do let me know. I will be thankful to all who give suggestions.

    I used Grid, Flexbox and media queries along with HTML and CSS.

    1
    Irina Lagutina•490
    @FoxMalder-coderPosted over 2 years ago

    Hi! The cards could be positioned by using "order: number". "number" can have positive or negative value. To put the quotation mark (use the full properties): first set background-color, then set background-image (don't forget you need path like ../images/), background-position and background-repeat. Sometimes we need background-size also but not this case - here size is 100% of origin so we didn't need to correct it.

    Marked as helpful
    0
  • Irina Lagutina•490
    @FoxMalder-coderPosted over 2 years ago

    Hi! I have some suggestion... You need to add some padding on the screens less the desktop size. Also it's really the bad practice to use <br> tag.

    0
  • AYUSH RANJAN•170
    @aayusranjanSubmitted over 2 years ago

    Hi there! Hope everyone doing great.

    Today I faced problem about:

    • .grid (class) not working.
    • using gird ( margin-left : -18rem) seems like not good idea to use -ve margin.
    • faced problem to do center all items.
    • item-2 and item-3 not at same place after responsiveness.

    Appreciate it for feedback : )

    Testimonials-grid-section

    2
    Irina Lagutina•490
    @FoxMalder-coderPosted over 2 years ago

    Hi! Try to think of content like just 1 grid - not 3 like in your case. All articles are grid cells. Use grid-column (or grid-row) properties to make them take more then one cell. For examlpe, grid-column-end: span 2 - make article take two column width. Yor can use another grid for article's content of course.

    Marked as helpful
    1