Skip to content
OverviewSolutions
53
Comments
8

Cheosphere

@CheosphereSantiago, Chile1,040 points

Diseñador gráfico de profesión, reconvirtiéndome en ciertas tecnologías del desarrollo web y la programación, motivado por la buena música 🤘🏻 | Graphic designer by profession, learning in certain technologies of web development and programming, motivated by good music 🤘🏻

I’m currently learning...

HTML, CSS, JS, starting with Vue.js

Latest solutions

View more solutions

Latest comments

  • Cheosphere•1,040
    @CheospherePosted over 1 year ago

    @KingMisach Hello, it is a very good development, you can improve the background by adding the following lines of code in your body tag:

    body {
    background-repeat: no-repeat;
    background-size: contain;
    background-color: hsl(225, 100%, 94%);
}
    Marked as helpful
    8
  • Cheosphere•1,040
    @CheospherePosted over 1 year ago

    @yallalaraja Hello, it is a very good development, you can improve the background by adding the following lines of code in your body tag:

    body {
    background-repeat: no-repeat;
    background-size: contain;
    background-color: hsl(225, 100%, 94%);
}
    1
  • Cheosphere•1,040
    @CheospherePosted over 1 year ago

    @anadutraoli Hello Ana Maria, your development looks great, so that the content is positioned in the center, you can apply the following css styles to the body tag:

    body {
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
}
    Marked as helpful
    7
  • Cheosphere•1,040
    @CheospherePosted over 1 year ago

    @Iamdodo22 Hello friend, I recommend that for the images you only establish the width and not its height, so you avoid that the image looks deformed.

    Marked as helpful
    3
  • Cheosphere•1,040
    @CheospherePosted over 2 years ago

    @debriks Hi Deborah, what a great job I love your project!... to avoid the horizontal scrolling generated by the mobile menu, you can apply the overflow-x property to the menu container (in your case the container class tag) as hidden, and position as relative:

    .container {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  position: relative;
}

    With this the horizontal scroll should disappear, it is likely that your design will be broken but it will surely be some minimum adjustment of margin and/or padding, no more than that.

    Marked as helpful
    7
  • Cheosphere•1,040
    @CheospherePosted over 2 years ago

    @coder-megha242 Hi Megha, here are some tips to make your project look better:

    First I recommend you set both html and body, a width and height of 100%, so that later with display flex you can center your content horizontally and vertically:

    html,
body {
    width: 100%;
    height: 100%;
}

    Regarding the "*" element, I recommend setting the margin, padding, and box-sizing properties, and setting the font-family property on the body, along with display-flex, justify-content, and align-items:

    *{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Outfit', sans-serif;
    background-color: hsl(212, 45%, 89%);
}

    The element with class ".content" does not need properties, since its parent element (body) will take care of centering your content:

    /* .content{
    height: 100%;
    width: 100%;   
    display: flex;
    justify-content: center;
    align-items: center;
} */

    The element with class ".box" is the container of the qr code image and texts, this element has a width of 320px and a height of 520px, and the padding of 10px is set on this parent element, so you won't have to apply padding to the child elements, additionally I recommend you to set the following properties in ".box", ".box h2" and ".box p":

    .box{
    width: 320px;
    height: 520px;
    background: hsl(0, 0%, 100%); 
    border-radius:  10px;
    padding: 16px;
}

 .box h2{
    /* padding: 10x; */
    margin-top: 16px;
    margin-bottom: 24px;
    font-size: 24px;
    text-align: center;
 }

 .box p{
    margin-top: 5px;
    padding: 10px;
    text-align: center;
    font-size: 15px;
 }

    Finally, to the ".box img" element you only assign a width of 100% and the height will adjust automatically, and I recommend setting the border-radius property to the same value as its container (10px):

    .box img{
    width: 100%;
    border-radius: 10px;
}

    I hope these tips are useful, a hug!

    4
View more comments