How to add some CSS code to your website

During the last lesson, we realized that the free version of the “Neve” theme is buggy in terms of the “Wide width” feature.

I am not sure if purchasing the premium version of the “Neve” theme could fix the issue.

But we can quickly fix this issue by adding the following CSS code to our website:

.alignwide {
  width: 90vw;
  max-width: 90vw;
  margin-left: calc(50% - 45vw);
  margin-right: calc(50% - 45vw);
}

Don’t worry about understanding this code. You could only understand the above code if you learned a lot of CSS.

For now, all you need to know is once we add the above CSS code to our website, selecting the “Wide width” option for any block will cause that specific block to appear wider.

Oops, sorry 😀

CSS stands for Cascading Style Sheets

As the name suggests, CSS helps you with the layout and styling of your website.

We didn’t know this because we have been using the customization options provided by the WordPress theme to change the design of our website.

But internally, each theme customization option has its own supporting CSS code. That’s why those options are working as expected.

Theme developers understand that dealing with CSS could confuse many of us.

So, they’ve made it simple by providing easy-to-use options.

These options allow us to customize our website’s design without messing with the CSS code ourselves.

Let me prove this.

Here is how our website looks if we remove all the CSS code from a WordPress theme:

Did you see that?

It is missing all the design details, such as typography, layout alignment, background images, etc.

And if we add the CSS, all the styling will return to normal.

That’s the purpose of CSS.

It acts like a skin on top of the skeleton.

As a non-techie, I understand that learning about CSS could overwhelm you

But if you’re dealing with a free theme, because of its limitations, we might have to add a few bits of CSS code to overcome those limitations.

Even when you reach out to the developers of the premium theme for help, they will provide CSS code like this to help you fix a particular style or layout problem:

.alignwide {
  width: 90vw;
  max-width: 90vw;
  margin-left: calc(50% - 45vw);
  margin-right: calc(50% - 45vw);
}

So, it is a good idea to learn how to add CSS code snippets for your website.

Come on, let’s not think much and add the above CSS code to our website and see how it fixes the “Wide width” issue.

How to add CSS code to your website

We can easily add CSS code using the “Additional CSS” panel inside the “Customize” screen.

The “Additional CSS” option is a theme’s feature, and every theme on the market supports it.

So, no matter what theme you’re using, you find this option by going to the “Customize” screen.

Come on, go to the “Customize” screen, and once you are there, you’ll find the “Additional CSS” panel at the bottom of the screen (on the left):

Click on it to access the CSS Editor:

Remove the instructions by clicking on the “Close” button and paste the following CSS code into the CSS Editor:

.alignwide {
  width: 90vw;
  max-width: 90vw;
  margin-left: calc(50% - 45vw);
  margin-right: calc(50% - 45vw);
}

It should look like this:

Finally, save the changes by clicking on the “Publish” button.

If you now go back to the edit screen of the Homepage we are building and preview the page on the frontend; it looks wider now:

This is exactly how I wanted my “Testimonials” section to look.

Thanks to CSS, we were able to fix the issue without taking the exhaustive route of switching to a different theme.

Also, even as a non-techie, it doesn’t hurt you to learn a bit of CSS.

So, if possible, try to learn CSS to save money and time.

Anyway, starting from the next lesson, I will give you many challenges to finish the rest of the Homepage.