Skip to content
OverviewSolutions
12
Comments
5
Kaylo
@KayloPortal

All comments

  • LJBL•370
    @LJBL22Submitted over 1 year ago

    Hello FEM lovers,

    After today's challenge, which took me around 7 hours, I know that I definitely need to practice more!

    I have two things that I would like to discuss with you. Please feel free to answer one or both of them.

    #1

    Is there any improving advice on my RWD, which was not working perfectly? I was especially not sure about the following:

    Desktop:

    • .picture won't feat the 100% height of viewport
    • left content I wrote 50%, and I wonder is there any more clever way to do so?

    Mobile:

    • background colour will not cover some part of the viewport when scrolling the page

    #2

    Is it okay to write the following CSS?

    :root {
font-size: 1.5rem;
}

    I think this is unusual, but it works. It's because I want to use em and avoid writing more code for the next media query level.

    Or do you have any better ideas for achieving this challenge without using media queries?

    Thank you, and have a great day :D"

    RWD page with email validation

    1
    Kaylo•270
    @KayloPortalPosted over 1 year ago

    [ 💖 ] Hello! Hope you had a nice day I saw the code and I think I have some suggestions and solutions for your questions

    Question #1

    • the picture is a parent to our img, If we increase the width or height of the parent, the img width doesn't change till we set it's height or width with relative units, that targets the parent properties, like "%" unit

    • But I have a better solution, instead of changing height or width of <picture>, set the width of it to 100vh or 100dvh (second one's more responsive), the parent size will change by its child

    • Now, all things will break. this is because of two things: 1/ picture has a position of absolute, it means the other containers doesn't react to its change or size or anything 2/ We don't have flex - grid for <main>

    • the solution is to set the position of <img> and <image> to relative, and put all of texts and the from and header in a <div class="content">

    • now we set these styles for <main>:

    .main {
display: grid;
grid-template-column: 1fr max-content;
}
    • We remove the sizes for <image> and we set the sizes for its child instead
    • And also we should remove the padding set to <main> and we set new padding for .content
    • For other issues you can checkout the others code, and also I suggest you to watch flex, grid and responsive webpage tutorials of kevin-powell in youtube

    Question #2 No it's not a good solution, we shouldn't change rem points, also we can use modern css features like flex, grid, clamp, min, max to make our webpage responsive.

    Hope it was helpful, Have a great day

    Marked as helpful
    1
  • fernandanevesf•160
    @fernandanevesfSubmitted over 1 year ago

    I'm not sure if the page looks fine in a 800px width screen, so I would like feedback on that.

    I've come across problems I'm not sure if I've solved in the best way. I had trouble making the box shadow for the container because the shadow would start from the padding, I solved that by creating a new div tag to add the box shadow to.

    I also had trouble making the "monthly subscription" and "why us" elements align horizontally for the desktop design, as "why us" looked shorter. I adjusted the padding, font size, spacing and weight until they aligned, but then I noticed they would only be aligned in my desktop's full window. I fixed that by adding a background color to the same div I had used for the box shadow.

    Please let me know if there were easier or more efficient solutions for these problems.

    Single price grid component solution

    1
    Kaylo•270
    @KayloPortalPosted over 1 year ago

    🎊Hello, Nice job!

    🎄 I saw your project and your code, good job, and nice problem solving!

    🔮 I have some suggestions for your code that can level up your code.

    1. Responsive Layout Sizing
    • As you said, the layout has a problem, when we get into 800px width, the points lose their positions. This problem happens because of the sizing method that used to sizing the .countainer and .countainer2

    .container{ margin: auto; width: 100%; padding: 80px 30px; }

    • The container width is set to 100%. it means that the box is looking at it's parent to set its size. the parent here is the <body> tag. 100% of width for body tag children, equals to the maximum width of the device screen size. (for example if the screen width is 800px, the 100% width for <body> children like [.container] equals to 800px)

    • Also, we leaved a padding for the .container, Right? The padding value is 80 & 30. it means that the width of the container2 is equal to (100% of the width - 30px - 30px). Can you see the problem here? let me ask a question,

    • What's the value of the .container2 width, in a mobile with screen width of 350px?

    • it equals to 350 - 30 - 30 = 290px.

    • What about a tablet with 1024px screen width?

    • 1024 - 60 = 960px

    • The width is not a fixed value, it's changing on different screen widths. So, What problems can it make?

    • using vw and screen widths for sizing our boxes have a big problem, we have devices with screen size of 200px to 4650px and higher, so if we set our elements sizes by these sizes, it will change and change and change on lower or higher screen sizes, and many times this changing value is so bigger that we wanted. For example it's very small on a mobile as we can't read them, and it's very big on a TV or a 4K monitor.

    So, what's the key?

    • CSS have "rem" & "em" units for creating responsive layouts. instead of using vw for sizing our boxes or making them with base of screen width with using 100% value in <body> tag, we can use rem.

    • rem is a relative unit, and the base and value of it can be changed with CSS or devices. you can read about rem units here and here and here

    And, also, for using h1-h6 tags

    • NEVER USE <h1-h6> TAGS BY THEIR SIZE
    • The reason of we have 6 tags for titles, is not the size. it can change by CSS.
    • The reason is S.E.O and accessibility. you can read about accessibility here
    Marked as helpful
    1
  • Zosima•220
    @SantiagoPonceSubmitted over 1 year ago

    HI! I hope you are very well. This is my last level 1 exercise :) I wanted to practice enough before tackling higher level exercises.

    I didn't implement changing the color of the social icons, since I couldn't think of any other way than to do it with javascript (but the exercise specifies to only use html and css) Any suggest is welcome

    Huddle landing page with a single introductory section

    1
    Kaylo•270
    @KayloPortalPosted over 1 year ago

    🎊Hello! Hope you have a greatful day.

    • HTML cannot edit jpg or png files. You can only edit svg & canavs, with HTML, CSS & JS

    🎄So what's the key?

    You can change the color of these icons 2 ways:

    1/ Using <i></i> (HTML icons)

    • Some websites like font-awesome, gives you HTML icons and you can use them in your project.
    • It give you a kit, and a link. you put the icon into your html, and change its color using CSS color property.
    • This is a nice way, but if you want to resize the icons accurately and have more control on your icon, you have to bye premium account.

    2/ Using svg (My suggestion)

    • As I said, html & CSS have a nice control on svg documents, if you have the script code of them.
    • if you just put an svg as an image(with <img> tag) in your html, It dose not have any difference with using png or jpg. you can't edit them by HTML at all.
    • To edit svg files, you need to have the code of them, not just the image. but how?
    • Some websites like svgsprite.es, get the svg documents and give you the coded version of them, and you can use them.

    So, we putted the coded version of svg in our project. how to edit them now?

    It need long and many lines to explain, but briefly:

    • You got the code, put it in a file. like social-icons.svg
    • If you got it from svgsprites.es, it put an id for each <symbol> tag. but if you don't see them, put a manual id for every <symbol> tag as an attribute.
    • now, put the social-icons.svg relative to the HTML file.
    • go to your html file, open an svg tag and put a <use> tag inside it like this: <svg class="social-icon"> <use xlink:href="social-icons.svg#icon-twitter"></use> </svg>
    • in the xlink:href, type the url of social-icons.svg first, and then, type the svg id you want to use and place a "#" at the beginning.
    • now, give a class to each svg, select it in CSS, and change the "fill" property to change the color.

    I used these svg icons in my "Huddle Landing Page" challenge. Take a look or use them if you want! I hope it was useful✨

    0
  • barbarian10•10
    @barbarian10Submitted over 1 year ago

    Why does the div overflow the border on different devices (e.g., iPhone 12 Pro)? How to fix it? Why does the third div (why) appear smaller in width than the second (subscription) on iPhone 12 Pro? How to fix it?

    Responsive block with CSS Grid

    1
    Kaylo•270
    @KayloPortalPosted over 1 year ago

    🎊Hello! Nice job

    • I don't understand your first question, but for the second question, I hope I can provide a good solution.

    • In the .grid class, a width of 240px is set for each column. This means that each column should be at least 240px wide. It is obvious that in devices with a width of less than 480px, such as the iPhone 12, it becomes smaller due to the lack of enough space.

    🎄How to fix the problem:

    1/ Using media query and rem:

    • The size of the rem unit is based on the font size in the <html> tag. By default this size is 16px.

    • According to this case, rem size can be changed by using media query in different view port sizes

    • for example : @media (max-width: 1440px){ html { font-size: 16px; } }

    This piece of code sets the size of the html font-size to 16px, on devices with a width of 1440px and less. you can use a rem unit and change it for different viewports, instead of using fixed points like px.

    2/ Using media query and grid

    • Since the ratio of the mobile is different from the desktop, it is obvious that the arrangement of the elements is also different in these two devices. As we can see in the designed file, due to the smaller width of mobile devices, we need to change our Grid design from a two-row and two-column design to a three-row and one-column design in a viewport width of less than 800 pixels.

    • Also, there more different ways to fix these type of problem and make the elements more responsive, like setting fr or ch width on elements, or using clamp(), min() & max().

    • You can google "Responsive Layouts" & "rem & em units" to get more information about it

    • I hope it was useful✨

    0
  • Kaylo•270
    @KayloPortalPosted over 1 year ago

    Nice job! Try puting different 'size' variubes at the :root and using them instead of fixed units like px. Then you can control the size of all 'rem' units by changing <html/> font-size in different sizes, and then you have a responsive webpage that displayable on all devices! using 'em' unit for padding will be also helpful

    Marked as helpful
    0