Support » Theme: Twenty Seventeen » Need to Make Featured/Panel Images Full Width + need padding-right for side menu

  • Resolved rtruo021

    (@rtruo021)


    Hi,

    I was designing a basic website for an employer to fill in with more content using Bluehost and the site has not been launched, so I can’t provide any links, but I’ll provide images. I am using a Child Theme of Twenty Seventeen that I created through the plugin Child Theme Configurator.

    I have fairly minimal experience with WordPress and with CSS so I’ve made ample use of the forums to solve various problems. In doing so, it seemed that I created another problem: the panel images (which are featured images on the pages I’ve chosen to be featured as front page sections) are not displaying as full width anymore (they did before); they get magnified and only take up about 60% of the browser.
    See here: https://i.imgur.com/gjrBDb3.png

    This is what it looks like to view one of the front page sections with the panel image behind it: https://i.imgur.com/Wi1aJW8.png

    I have various customizations in the Additional CSS and I’ve tried removing each one to see if there is any effect on how the panel images display. The only attribute that seems to have an effect is this one:

    .page-id-8 #main {
    	width: 100%;
    	}

    I’ve tried adding a max-width attribute to this with values of 100% or more and also “none” with no effect. I’ve also tried increasing the value of the width (e.g. 120%); that causes the panel image to stretch to the right.

    I viewed the featured image on the page “About” and it also does not display at full-width (see below). I’m not sure if these two issues are related and I have been unable to fix them using solutions offered in similar forum topics:
    See the About page here: https://i.imgur.com/5DJyREJ.png

    Unfortunately, it’s been several months and I didn’t keep a record of the solutions I tried applying to the Additional CSS. Some of the recent ones I’ve tried are below:

    .home .panel-content .wrap {
        max-width: 100%;
    }

    and

    .panel-image {
    	width: 100%;
    	padding: 0px
    		!important;
    }

    and

    .twentyseventeen-front-page .content-area .wrap {
        max-width: none
    }

    The other issue I’m having is with the side-bar on the “About” page. I want to have some padding on the right; I fixed this issue previously for the pages listed in the sidebar itself, but I’m not sure why it persists on the About page.
    I tried these two customizations without success:

    .right-sidebar {
      padding-right: 50px;
    }

    (For this one I also tried to add .widget-area and .page-id-9 before .right-sidebar.)

    and

    .page-id-9 .content, .sidebar{
    padding-right: 50px;
    }

    I feel like I’ve been running in circles and hitting walls every time I tackle these issues; I would be so grateful for some help!
    – Ruth

Viewing 11 replies - 1 through 11 (of 11 total)
  • did you make any edits to any of the templates of the theme?
    did you edit any other CSS than the ‘Additonal CSS’?

    if ‘no’ to the two above, can you post your complete ‘Additonal CSS’ here?

    ideally, can you post a live link to your site with the problems?

    Thread Starter rtruo021

    (@rtruo021)

    Hi Michael,
    Thank you for responding!
    Unfortunately, because the site is not launched, I cannot post a live link (unless you have a workaround to suggest for that). I don’t believe I edited any other CSS aside from Additional CSS, but I did edit a few of the .php files through the Bluehost File Manager (one reason being to add a side menu).

    This is everything I have in the Additional CSS:

    /* Mobiles */
    .site-title {
    	font-family: Palatino Linotype, serif;
    	font-size: 20px;
    }
    
    /* Computer screens */
    @media screen and (min-width: 48em) {
    .site-title {
    	font-family: Palatino Linotype, serif;
    	font-size: 35px;
    	}
    }
    .page .entry-title {
    	font-family: Palatino Linotype, serif;
    	font-size: 30px !important;
    }
    
    .h1 {
    	font-family: Patalino Linotype, serif;
    }
    .h2 {
    	font-family: Palatino Linotype, serif;
    }
    
    @media screen and (min-width: 48em) {
    	#main {
    		float: left;
    		width: 80%;
    	}
    	#secondary {
    		width: 20%;
    		float: right;
    	}
    }
    .wrap {
    	/* margin-left: auto; */
    	/* margin-right: auto; */
    	max-width: 100%;
    	/* padding-left: 2em; */
    	/* padding-right: 2em; */
    }
     
    @media screen and (min-width: 48em) {
    	.wrap {
    		max-width: 100%;
    		padding-left: 3em;
    		padding-right: 3em;
    	}
    }
     
    .page.page-one-column:not(.twentyseventeen-front-page) #primary {
    	margin-left: auto;
    	margin-right: auto;
    	max-width: 100%;
    }
    
    @media screen and (min-width: 30em) {
    	.page-one-column .panel-content .wrap
    	{
    		max-width: 100%;
    	}
    }
    .entry-header {
        margin-top: -2em;   /*before*/
        margin-bottom: 2em !important;   /*after*/
    }
    
    @media screen and (min-width: 48em) {
    body.page-template-page-full-width .page-full-width #primary .entry-content {
    width: 100%;
    }
    
    body.page-template-page-full-width .page-full-width #primary .entry-header {
    width: 100%;
    }
    }
    
    .page-id-8 #main {
    	width: 100%;
    	}
    .page-id-8 .wrap {
        max-width: 100%;
    }
    .panel-image {
    	width: 100%;
    	padding: 0px
    		!important;
    }

    Feel free to refer to the images I linked in the first post, and please let me know if I can provide any more information or visuals.

    unfortunately, the ‘Additional CSS’ alone does not fully reproduce the problems shown in the screenshots.

    this section:

    @media screen and (min-width: 48em) {
    	#main {
    		float: left;
    		width: 80%;
    	}
    	#secondary {
    		width: 20%;
    		float: right;
    	}
    }

    does cause some of the narrowing of the panel images and other areas.
    #secondary only appears on the posts page, so you might need to make some of these styles more specific to only apply to some of the pages.

    by default, there are no elements with the CSS classes .page-template-page-full-width, .page-full-width, .right-sidebar, .sidebar and .content in the theme, unless you have introduced it with your new codes.

    there is also no page template in the theme to have a sidebar on a static page (like the ‘about’ page you mentined); you might need to post your code for that here to get more support.

    all in all, without a live link the the site, there is ufortunately little chance to get the formatting problems sorted.

    Thread Starter rtruo021

    (@rtruo021)

    Hi Michael,

    I found a way to disable the Bluehost Coming Soon page. Can you let me know if the website link works? https://earlymoderntitlepage.com

    This is what the page.php looks like:

    <?php
    get_header(); ?>
    
    <div class="wrap">
    	<div id="sidebar">
    		<?php get_sidebar( 'sidebar-1' ); ?>
    	</div>
    	<div id="primary" class="content-area">
    		<main id="main" class="site-main" role="main">
    			<?php
    			while ( have_posts() ) :
    				the_post();
    
    				get_template_part( 'template-parts/page/content', 'page' );
    
    				// If comments are open or we have at least one comment, load up the comment template.
    				if ( comments_open() || get_comments_number() ) :
    					comments_template();
    				endif;
    
    			endwhile; // End of the loop.
    			?>
    
    		</main><!-- #main -->
    	</div><!-- #primary -->
    </div><!-- .wrap -->
    
    <?php
    get_footer();

    I also did create a page-full-width.php which looks like this:

    <?php
    get_header(); ?>
    <?php get_sidebar( 'sidebar-1' ); ?>
    <div class="wrap page-full-width">
    	<div id="primary" class="content-area">
    		<main id="main" class="site-main" role="main">
    
    			<?php
    			while ( have_posts() ) :
    				the_post();
    
    				get_template_part( 'template-parts/page/content', 'page' );
    
    				// If comments are open or we have at least one comment, load up the comment template.
    				if ( comments_open() || get_comments_number() ) :
    					comments_template();
    				endif;
    
    			endwhile; // End of the loop.
    			?>
    
    		</main><!-- #main -->
    	</div><!-- #primary -->
    </div><!-- .wrap -->
    
    <?php
    get_footer();

    Looking at my child theme files, I also have one called sidebar-primary.php which only contains this:

    <div id="sidebar-primary" class="sidebar">
        <?php dynamic_sidebar( 'primary' ); ?>
    </div>
    
    <?php wp_nav_menu( array( 'theme_location' => 'new-menu' ) ); ?>

    That is separate from my sidebar.php which looks like this:

    <?php
    /**
     * The sidebar containing the main widget area
     *
     * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
     *
     * @package WordPress
     * @subpackage Twenty_Seventeen
     * @since 1.0
     * @version 1.0
     */
    
    if ( ! is_active_sidebar( 'sidebar-1' ) ) {
    	return;
    }
    ?>
    
    <aside id="secondary" class="widget-area" role="complementary" aria-label="<?php esc_attr_e( 'Blog Sidebar', 'twentyseventeen' ); ?>">
    	<?php dynamic_sidebar( 'sidebar-1' ); ?>
    </aside><!-- #secondary -->

    Finally, my style.css in Child Theme Files only contains this:

    .content-area {
    width: 70% !important;
    max-width: 70% !important;
    margin: 0 auto !important;
    float: none !important;
    }
    
    @media only screen and (max-width: 768px) {
    .content-area {
    width: 100% !important;
    max-width: 100% !important;
    }
    }

    Upon noticing the 70% I tried changing the values to 100%, but refreshing the website did not show any difference.

    Apologies for the abundance of code and confusion. Again, please let me know if you’re able to view the site and if I can provide any other information. Thank you!!

    the styles in the child theme do narrow the panels etc on the front page (and probably everywhere).

    removing them will bring the panels back to full width.

    if you really need those styles for some of the other pages, make them more specific in the CSS by adding the .page-id-???

    –re: <?php get_sidebar( 'sidebar-1' ); ?>
    this is trying to call a file sidebar-sidebar-1.php and because it can’t find it, will revert back to getting sidebar.php.

    –are you using <?php get_sidebar( 'primary' ); ?> in any of the files to use sidebar-primary.php ?

    –to get some space on the right of the ‘about’ full width page, try:

    @media screen and (min-width: 48em) {
    	.page-template-page-full-width #main {
    		float: left;
    		width: 75%;
    	}
    	.page-template-page-full-width #secondary {
    		width: 20%;
    		margin-right: 3em;
    		float: right;
    	}
    }
    Thread Starter rtruo021

    (@rtruo021)

    Hi Michael,

    Thank you! I removed the styles from the Child Theme styles.css as you suggested, which resolved the problem of the narrowed panels when viewing the website on Safari and Firefox, but not Google Chrome. Would you happen to know why Google Chrome is the exception? I’m able to view other websites using a Twenty Seventeen Child theme without issues, and I’m not sure what I did that is causing the problem to persist on Chrome for the website I’m working on.

    Another issue that remains is that the featured image for the About page still won’t display at full width on any browsers. I haven’t found any useful info in the forum for this problem. Do you have any suggestions to solve this?

    I replaced some previous styles with the ones you provided and they worked perfectly to add right-side padding to the “About” page. Thanks again!
    Truthfully, it’s been so long since I tried to add the side menu (which took multiple attempts) that I can’t remember what is and isn’t needed in the .php files. Given that I have the padding I want beside the side menu, I think I’ll leave that php stuff alone for now, unless you suggest otherwise.

    Thread Starter rtruo021

    (@rtruo021)

    Hi Michael,

    Sorry to add a couple of other issues to the list before you’ve had a chance to respond to my other update, but I have yet to find solutions through forum searches for these two problems:

    The first is that I’m not sure what I did to make the site title and tagline float so far to the left. Can you help me align them with the top-menu (i.e. to make the first letters of the site title and tagline to line up with the first letter of “Home”)?

    The other issue is that on the other pages (“Browse Images”, “Key Terms”, “Anatomy of a Title Page”, and “About Author Portraits”), the content in the body (?) is too close to the side menu. How can I add some space between them?

    Thread Starter rtruo021

    (@rtruo021)

    Hi Michael @alchymyth ,

    I’m sure you are up to your elbows in a myriad of requests for support. I really appreciate all the help you’ve offered so far!

    It turns out that it’s just my Chrome browser that’s having trouble rendering the Home page properly; others have tried it on their Chrome browsers without problems. I also made a couple of adjustments that eliminated the problems of the site title and tagline alignment and the page content being too close to the side menu.

    The only thing I’d like to fix now is the featured image on the “About” page. Is there a way to make it full width? Should I create a new topic for it?

    Thanks,

    Ruth

    • This reply was modified 4 years ago by rtruo021. Reason: Made some changes/ran some checks that eliminated 3/4 problems I had
    Michael

    (@alchymyth)

    re:
    site title and description:
    looks ok and aligned on Chrome on my end.

    re:
    featured image on the ‘About’ page:

    the used featured image is simply too small for the screen width; (it is only 749px wide). that does not show on the front page panels because the image is strectched automatically by the CSS, loosing sharpness…)

    on the pages, you can force the featured image to cover the full width space by adding this CSS:

    .single-featured-image-header img {
        width: 100%;
        height: auto;
    }

    re:
    other pages padding to sidebar:

    try adding this to the bottom of ‘Additional CSS’:

    @media screen and (min-width: 48em) {
    	.page-one-column #main, .page-template-page-full-width #main {
    		float: left;
    		width: 75%;
    	}
    	.page-one-column #secondary {
    		width: 20%;
    		margin-right: 0em;
    		float: right;
    	}	
    	.page-template-page-full-width #secondary {
    		width: 20%;
    		margin-right: 3em;
    		float: right;
    	}
    }
    Thread Starter rtruo021

    (@rtruo021)

    Hi Michael @alchymyth ,

    Thanks for the tip about the featured image!

    Is there a way to make the home page an exception to the CSS you provided for padding between page content and sidebar? It solves the problem I was discussing for those pages but also applies those changes to the home page (i.e. it causes the content to float left and to display at 75% width).

    Thread Starter rtruo021

    (@rtruo021)

    Hi Michael,

    Never mind about the last question I had! I got it to work by placing

    .page-id-8 #main {
    	width: 100%;
    	}

    within the CSS you provided in your most recent response!

    • This reply was modified 4 years ago by rtruo021. Reason: marking as resolved
Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Need to Make Featured/Panel Images Full Width + need padding-right for side menu’ is closed to new replies.