Maria Antonietta Perna

Hi Tiffany,

A link to your website would help to target the appropriate elements with CSS and also to assess the result.

However, if you’re using the full-width template on a page, you should get a full-screen layout by adding this CSS snippet to a custom CSS editor or a Storefront child theme:

.col-full {
    max-width: 100%;
}

This really stretches the content all the way, which might not be what you want. I recommend you add a max-width value of at least 80-90%.

This is a quick solution, let me know if it works for you.

Hi things4students,

To quickly make the icon disappear, try this code in a custom CSS editor:

.hentry .meta-post span.byline::before {
    content: "";
}

I hope this helps ??

– Maria Antonietta

You’re very welcome!

Hi Eoin,

It looks like there’s an empty p tag that causes the issue. This CSS snippet solves it, but I’m not sure if it’s going to affect something else on the site:

.panel-widget-style p {
    display: none;
}

I hope this helps ??

Great, you’re welcome!

Just add:

.widget, .widget a {
  color: #333;
}

You can replace #333 with your favorite color.

Hi there,
Here’s how you can change the background color for the widgets:

.widget {
  background-color: white;
}

You could use this code to shorten the social navigation:

.social-navigation {
    max-height: 40px;
}

If the social icons look misplaced after you do that, try adjusting it with this:

.social-navigation ul {
    margin-top: -10px;
}

I hope this helps ??

The social icons are icon fonts, therefore you could reduce the font size, like so:

.social-widget a::before,
.social-navigation li a::before {
    font-size: 16px;
}

To center the slider, modify the existing margin value like this:

.flexslider {
    margin: 0 auto 30px;
}

Thanks for getting back with a link.

The slider changes its height because it follows the height of whatever image you put in there. However, its width is always 100% of its container because this is the nature of responsive images. If you resize the width to a smaller size, some of the content gets cut off. You can try this out for yourself:

.flexslider {
  max-width: 80%;
}

You could try adding another element, adjust its size and then insert the slider inside this element. I’m not too sure how comfortable you are with WordPress template files, but unless you’re a developer, my recommendation is to keep the slider width at its default size.

As for the header height, you could adjust the height using this code:

.site-header {
    max-height: 200px;
}

Replace 200px with your chosen height value. However, be mindful of the fact that if you make the header a fixed height instead of letting it grow with its content, the content could spill over, especially on smaller screens.

To change the font size in the site title, use this CSS:

.site-title {
    font-size: 40px;
}

And to change the tagline, use this snippet:

.site-description {
    font-size: 20px;
}

You’re free to replace 40px and 20px with your chosen font size.

I hope this helps ??

Hi Maggan22,

Looking at your theme’s demo site, you could add something like this to a custom CSS editor:

.content-container {
    background-color: black;
}

It’s better to post a link to your site, so the code can be more precise.

Also, if your theme doesn’t provide a custom CSS editor, use a custom CSS plugin like this one:

https://www.ads-software.com/plugins/simple-custom-css/

This ensures your CSS changes survive a theme update.

I hope this helps ??
– Maria Antonietta

Hi Nanumihai,

I’ve visited the live demo of your theme and the slider looks perfectly responsive:

https://demo.athemes.com/solon/

Could you please post a link to your web page where you have the slider showing, so that it could be easier to work out what the problem may be.

Cheers!
– Maria Antonietta

Hi Obulibalaji,

I’m not sure if it’s advisable to remove those links, but an easy way to do so is using CSS. If your theme has a custom CSS editor, you can add a snippet that looks like this:

.pagination {
 display: none;
}

This works in Twenty Fifteen. If you post a link to your theme, it’ll be easier to give you the exact code.

If your theme doesn’t provide you with a custom CSS editor use a plugin like this one:

https://www.ads-software.com/plugins/simple-custom-css/

This ensures that you won’t lose any of your CSS changes when your theme gets updated.

I hope this helps ??

– Maria Antonietta

Hi Chuangeezy,

If adding a products slider is not an option your theme offers out of the box, you’ll need to add it manually.

If you’re not a developer, you could try adding a WordPress plugin. You can try this great plugin hosted on the .org repo:

https://www.ads-software.com/plugins/wpb-woocommerce-product-slider/

Or you can simply perform a Google search.

If you like to code, this is a tutorial on how to add a featured products slider (without a WordPress plugin) that you could adapt for your theme (make sure you create a child theme for this):

https://wpthememakeover.com/2015/12/07/how-to-code-a-woocommerce-featured-products-slider-in-your-theme/

I hope this helps.

– Maria Antonietta

If you need to change the background in the entire content area, you can use this snippet:

.site-content {
    background: red;
}

If you’re looking to change the background only in the middle part, where the chef is, try this:

.site-main {
  background: red;
}

I hope this helps ??

Obviously, you can replace red with your favorite color.