Need help In CSS

[vayim8548]

Can anyone help me with the following points? I would really appreciate your assistance.

1. How can I create buttons with rounded corners?
2. How can I center-align text within a section?
3. How can I change the background color of a section?
4. How can I display different font sizes on desktop and mobile devices?

Thank you for your assistance!

[Huptech-Web · Accepted solution]

Hey @vayim8548 Could you please share the store URL? This will allow me to inspect it and provide you with a more tailored solution.

Best regards
K.K

[Huptech-Web · Accepted solution]

Hello! @vayim8548 Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "theme CSS File"
6. Add the following code at the end of the file.

/* How can I create buttons with rounded corners? */
button {
    border-radius: 15px; /* Adjust the value to increase or decrease roundness */
}

/* How can I center-align text within a section? */
section {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center; 
    margin: 0 auto;
}

/* How can I change the background color of a section? */
section {
    background-color: #f0f0f0; /* Replace with your desired color */
}

/* How can I display different font sizes on desktop and mobile devices? */
/* Default font size for desktop */
section {
    font-size: 18px;
}
/* Smaller font size for mobile devices */
@media (max-width: 768px) {
    section {
        font-size: 16px;
    }
}

 

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Best regards
K.K

[Huptech-Web · Accepted solution]

@vayim8548 find the base.css file and add the following code at the end of the file. 

[Huptech-Web · Accepted solution]

ok @vayim8548 , Let me know if you need further assistance.

[Huptech-Web · Accepted solution]

Most Welcome @vayim8548 😊

[Huptech-Web · Accepted solution]

Hey @vayim8548 Could you please share the store URL? This will allow me to inspect it and provide you with a more tailored solution.

Best regards
K.K

[steve_michael2]

Hi @vayim8548 , I hope you are doing well. Since you only need help in css. So, I'll provide you the css properties which will do what you want to do.

1: To create buttons with rounded corners:

.rounded-button { 
  background-color: #007bff; /* Button background color */
  color: white; /* Text color */
  border: none; /* Remove default border */
  padding: 10px 20px; /* Padding inside the button */
  border-radius: 12px; /* Rounds the corners */
  font-size: 16px; /* Font size */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s ease; /* Smooth background color transition */
}

.rounded-button:hover {
  background-color: #0056b3; /* Background color on hover */
}

2. To center-align text within a section: 

.centered-text {
  text-align: center; /* Center-aligns text horizontally */
}

3. To change the background color of a section:

.colored-section {
  background-color: #f8f9fa; /* Section background color */
  padding: 20px; /* Padding inside the section */
}

4. To display different font sizes on desktop and mobile devices:

/* Default font size for desktop */
.responsive-text {
  font-size: 18px; /* Desktop font size */
}

/* Font size for mobile devices */
@media only screen and (max-width: 600px) {
  .responsive-text {
    font-size: 14px; /* Mobile font size */
  }
}

"." represents a class

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[Huptech-Web · Accepted solution]

Hello! @vayim8548 Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "theme CSS File"
6. Add the following code at the end of the file.

/* How can I create buttons with rounded corners? */
button {
    border-radius: 15px; /* Adjust the value to increase or decrease roundness */
}

/* How can I center-align text within a section? */
section {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center; 
    margin: 0 auto;
}

/* How can I change the background color of a section? */
section {
    background-color: #f0f0f0; /* Replace with your desired color */
}

/* How can I display different font sizes on desktop and mobile devices? */
/* Default font size for desktop */
section {
    font-size: 18px;
}
/* Smaller font size for mobile devices */
@media (max-width: 768px) {
    section {
        font-size: 16px;
    }
}

 

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Best regards
K.K

[vayim8548]

@Huptech-WebI don't have a custom CSS file, and there is no theme.css file in my Dawn theme. Where can I add this code?

[Huptech-Web · Accepted solution]

@vayim8548 find the base.css file and add the following code at the end of the file. 

[vayim8548]

Let me check.

[Huptech-Web · Accepted solution]

ok @vayim8548 , Let me know if you need further assistance.

[vayim8548]

It's working, thanks @Huptech-Web, I appreciate your help.

[Huptech-Web · Accepted solution]

Most Welcome @vayim8548 😊

[Huptech-Web · Accepted solution]

Hello @vayim8548, If the solution presented meets your needs and addresses your query effectively, I encourage you to accept it as the chosen answer. This will acknowledge your support and aid fellow community members in identifying reliable and effective solutions for their similar concerns.
Thank you😀