Siobhan Bamber (siobhyb) on "[Theme: Sela] Full Width not True Full Width"

Hi,

I have not been able to solve this problem looking through the other issues people of posted on this. I still have two side areas on the left and right that show my background no matter what I change. I have tried changing my content area to 100% and that makes it bigger but the side areas remain. I have checked to make sure I am using the full width page theme, and even added in another copy of the full-width.php into my child theme.

I tried these codes in my CSS as well.

@media screen and (min-width: 998px) {
.page-template-full-width-page .content-wrapper.full-width.without-featured-image {
margin: 0;
}
}
@media screen and (min-width: 998px) {
.page-id-8 .content-wrapper.full-width.without-featured-image { margin: 0 13.98%;
}
}

Hoping someone can help, I'm sure I am just missing something.

Thanks!

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 leaing 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]http://i65.tinypic.com/6s3shs.jpg[/IMG] I thought I included this, but I guess not!
http://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 tued back to grey, just so I could see if anything was actually changing :)

http://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!