how to make a particular page content wider
-
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!
-
What theme are you using? Where did you download it from?
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.
okay, child created
now what?I’m a LAMP stack developer, just not a WP themer yet
Link to your site?
[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 -------------------------------------------------------------- */
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.
hERE’S THE LINK:
http://bit.ly/1b4P3l4I’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; }
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.
okay, This finally worked:
.page-id-5 p { width: 1200px; }
thanks for your help!
- The topic ‘how to make a particular page content wider’ is closed to new replies.