Full Width not True Full Width

Hi. ??

Would you please share a link to your site in your next reply? I can then use my browser’s built in tools to view your site’s CSS and provide a more accurate answer to your question. (If you’re interested in learning how to use your browser’s tools in this way then we have guidance and video tutorials here.)

In addition, the CSS you tried was for pages that don’t have a featured image assigned to them. Does your page have a featured image? If so, replace .without-featured-image with .with-featured-image:

@media screen and (min-width: 998px) {
.content-wrapper.full-width.with-featured-image {
    margin: 0;
    padding: 1.5em 3% 0;
}
}

If you share the link to your site then I can look further into why any CSS you add isn’t working.

Thanks!

Hi Siobhan,

I am building my website locally using mamp on my mac, I’m not sure how to include a link for you (if it’s possible!) If I can, I would love to have you take a look.

That code didn’t work, but I also just realized that I am trying to make my regular webpage full width and I believe that code is for my mobile and tablet browsers? Is that correct?

Sorry! Very new to all of this ??

Hi @muditametta.

No need to be sorry! We’re happy to help here. ??

The full width page template on Sela does still leave some border, by design. Can you take a look at the example full width page on the theme’s demo site and confirm if your page looks the same? The demo’s page can be found here:

https://selademo.wordpress.com/page-templates/full-width-page/

Does your page have a featured image?

The CSS given in the last two replies should work for devices that are 998px or over. Could you try adding it again, saving, and then testing in a couple of browsers? This will help us eliminate any browser specific settings that may be causing it to not work (e.g. browser zoom.)

Hi again Siobhan,

Yes that is the same page, my page also has a featured image. I checked again in my safari browser, and in google chrome and there is still a space. The space is smaller in google chrome, but my featured image doesn’t go right to the edge like I’m hoping! I changed the grey space to white, but it just makes my page look a bit funny. I have attached a picture of my featured image to show, but it’s the same for the footer and my widgets as well. Maybe you can take a look!

[IMG]https://i65.tinypic.com/6s3shs.jpg[/IMG] I thought I included this, but I guess not!
https://i65.tinypic.com/6s3shs.jpg

Thank you for the screenshot. ?? I think I’m clearer on what you’re trying to achieve now. Could you try the following CSS?

.page-template-full-width-page .site {
    max-width: 100%;
}

.page-template-full-width-page .entry-thumbnail img {
    width: 100%;
}

.content-wrapper.full-width.with-featured-image {
    margin: 0;
}

The above will remove the border surrounding your content area and also get your featured image to span the entire width of your browser.

As an extra note: CSS should be added via a child theme or a plugin, like Jetpack.

Let me know if that works out for you!

Hi Siobhan,

Still no luck… I added it into my custom css editor plug in, and then the child theme when that didn’t work! ??

I even tried changing this in the child theme,

.site {
max-width: 1180px;
padding-right: 2.33050%;
padding-left: 2.33050%;
}
.site-content {
background-color: #fff;
padding: 3em 4.661%;
}

I changed all padding to 0; and no change!

Here is a picture of it turned back to grey, just so I could see if anything was actually changing ??

https://tinypic.com/r/2ntwzdx/9

I even tried changing this in the child theme

If you’re adding custom CSS via a plugin then your child theme’s style.css file should contain no CSS.

It sounds like you may have copied over the CSS from the parent theme’s file, which would create some issues when attempting to add custom styles.

Can you confirm whether this is the case?

Thanks!

Hi Siobhan,

I did copy over everything from the parent theme. I wanted a lot of the same set up – but I am finding it difficult now to customize a lot of these things. A few things that I have put in my custom CSS plug in have worked to change the appearance of things. I am not sure which part of the style.css I should delete. All I did was create a child theme by copying the sela theme and followed a tutorial on creating a child theme.

When you create a child theme, you don’t copy over the entire stylesheet. You only need to add the bits of CSS to your child theme that you want to override from the parent. If you’ve enqueued the parent theme’s stylesheet correctly in your child theme, the site will automatically take on the parent’s styles, except for any pieces you’ve overridden in your child theme’s stylesheet.

To find the right elements to target with your changes, it helps to understand how to use a browser inspector. Here are some resources to learn more about targeting HTML elements with a browser inspector and customizing them with CSS:

https://dailypost.wordpress.com/2013/07/25/css-selectors/

https://dailypost.wordpress.com/2013/06/21/css-intro/

https://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/

https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

https://thewc.co/articles/view/web-inspector-tutorial

https://cssworkshop.wordpress.com/

Let us know how it goes.