• Resolved webdevguy23

    (@webdevguy23)


    I’ve searched for where to put the style class that I have in the styles.css that only changes the width of the contant of a page content of one particular page. I know to use:

    if ( is_page( 5 ) ) : ?>
    <?php endif; ?>

    But… where, which template, do I need to add it to and where?

    Many thanks!

Viewing 15 replies - 1 through 15 (of 15 total)
  • What theme are you using? Where did you download it from?

    Thread Starter webdevguy23

    (@webdevguy23)

    I am adding an amazon associates store to a page. my theme is Twenty Thirteen and the content for the page content is about 150 px too narrow for the store to display. Nothing I can change on amazon settings so I am trying to code out the problem for that ONE page.

    The amazon astore is an <iframe>. I tried embedding it, same problem

    Do not edit the Twenty Thirteen theme. It is the current default WordPress theme and having access to an original, unedited, copy of the theme is vital in many situations. First create a child theme for your changes.

    Thread Starter webdevguy23

    (@webdevguy23)

    okay, child created
    now what?

    I’m a LAMP stack developer, just not a WP themer yet

    Link to your site?

    Thread Starter webdevguy23

    (@webdevguy23)

    [Content removed by poster]

    You need to make that into a valid child theme – the style.css file should have ONLY changes in it – not a copy of the entire file.

    This is what should be in there to start with:

    /*
     Theme Name:     Twenty Thirteen Child
     Theme URI:      http://example.com/twenty-thirteen-child/
     Description:    Twenty Thirteen Child Theme
     Author:         John Doe
     Author URI:     http://example.com
     Template:       twentythirteen
     Version:        1.0.0
    */
    
    /* =Imports styles from the parent theme
    -------------------------------------------------------------- */
    @import url('../twentythirteen/style.css');
    
    /* =Theme customization starts here
    -------------------------------------------------------------- */

    Thread Starter webdevguy23

    (@webdevguy23)

    Okay. I changed the style.css in the child tampate to be:

    /*
     Theme Name:     Twenty Thirteen Child
     Theme URI:      http://example.com/twenty-thirteen-child/
     Description:    Twenty Thirteen Child Theme
     Author:         John Doe
     Author URI:     http://example.com
     Template:       twentythirteen
     Version:        1.0.0
    */
    
    /* =Imports styles from the parent theme
    -------------------------------------------------------------- */
    @import url('../twentythirteen/style.css');
    
    /* =Theme customization starts here
    -------------------------------------------------------------- */
    
    media="all"
    embed, iframe, object, video {
    	width: 1200px;
    }

    In dom inspector, when I make the change of

    media="all"
    embed, iframe, object, video {
    	width: 1200px;
    }

    It fixes the problem. I use the editor in the WP to make the change to the style.css to the above, and it reverts completely back to the original, according to DOM inspector.

    Any ideas?

    You can’t put this in an external CSS file:

    media="all"

    I no longer have the link to your site – but from looking at it before I think it was padding on `.entry-content – use the page-specific class to target just that page – something like:

    .page-id-5 .entry-content {
       padding: 0;
    }

    I think you’ll have to look at the media queries for different size devices to make it work well. Might also be width or max-width to change.

    Thread Starter webdevguy23

    (@webdevguy23)

    hERE’S THE LINK:
    http://bit.ly/1b4P3l4

    I’ve been building web pages for almost twenty years and I really do appreciate your help. This makes absolutely no sense to me. I can make the changes to the dom styles in the browser tool, and make those exact changes in the styles file, but it does not work. What am I missing?

    Just for testing I made it 1200px like this – here’s my styles for the child:

    /*
     Theme Name:     Twenty Thirteen Child
     Theme URI:      http://example.com/twenty-thirteen-child/
     Description:    Twenty Thirteen Child Theme
     Author:         John Doe
     Author URI:     http://example.com
     Template:       twentythirteen
     Version:        1.0.0
    */
    
    /* =Imports styles from the parent theme
    -------------------------------------------------------------- */
    @import url('../twentythirteen/style.css');
    
    /* =Theme customization starts here
    -------------------------------------------------------------- */
    
    .post-5 .entry-header {
       	width: 1200px;
    }

    Many thanks.

    Did you try:

    .page-id-5 .entry-content {
       padding: 0;
    }

    The width is reduced by padding – as shown by Firebug here – line 981 (for desktop browser width):

    .sidebar .entry-header, .sidebar .entry-content, .sidebar .entry-summary, .sidebar .entry-meta {
        max-width: 1040px;
        padding: 0 376px 0 60px;
    }

    Thread Starter webdevguy23

    (@webdevguy23)

    I’ve tried both of those now, with no effect. Does this baffle you as much as it does me?

    thanks

    You don’t have this:

    .page-id-5 .entry-content {
       padding: 0;
    }

    Try ONLY that.

    Thread Starter webdevguy23

    (@webdevguy23)

    okay, This finally worked:

    .page-id-5 p {
    	width: 1200px;
    }

    thanks for your help!

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘how to make a particular page content wider’ is closed to new replies.