Digital Pro Theme – Custom Page – Full width sections

[weborganizing]

Hello Studiopress Community,

i really like a lot of the childthemes and front-pages, that studiopress have created the last years. A lot of trial an error for me, a little bit of customizing - it was possible for me to achieve results in the past. Still i´m not a professional coder anyway and actual i´m looking for *the best* step by step tutorial for custom pages. So far it is not possible for me to create a specific page and use full width sections from edge to edge of the browser - like this example based on the digital pro theme:

About

I think that this "About Page" is a custom page. The first section with the picture of Marc Holzman, the second purple section and third section with the picture of the "yoga lesson" is streched from edge to edge of the browser (responsive). I like these sections and want to use them also on specific pages.

I created a custom page with this code:

<?php

/**
* Template Name: Digital Price Template
* Description: Template used for the Price Table page
*/

//* Add custom body class
add_filter( 'body_class', 'digital_price_body_class' );
function digital_price_body_class( $classes ) {
	$classes[] = 'price-page';
	return $classes;
		
}

genesis();

I also customized the style.css with this code:

/* CUSTOM: Digital Price Template
---------------------------------------------------------------------------------------------------- */
.price-page.page .entry-content,
.price-page.single .entry-content {
	max-width: none;
}

.price-page .breadcrumb {
	max-width: none;
}

.price-page.page.page .entry-header,
.price-page.single .entry-header {
	max-width: none;
}

My Problem is, that the content not goes from edge to edge of the browser, if i use this template. Something blocks left and right.

You can see it here at the first paragraph (and pricetable also):

presentando DOT de FORWARDSLASH erklaervideo-kaufen

If you know a good tutorial or if you can tell me what to do, please let me know.

Thank you very much and best regards.

[Christoph]

Hi,

If you don't want to have the url clickable, wrap it in code tags next time, please.

In the case of this theme, .site-inner sets max-width: 1280px;.
Remove that and with the selectors you have already added you will get a full-screen layout.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Author]

Posts