Community Forums › Forums › Archived Forums › General Discussion › Full width page
- This topic has 8 replies, 3 voices, and was last updated 8 years, 10 months ago by Erik D. Slater.
-
AuthorPosts
-
June 18, 2015 at 6:17 pm #156719delightMember
So I added two sub category pages last night and those two pages aren't full width like the other pages.
How can I fix this?
Thanks.
http://www.fabellastudios.comJune 18, 2015 at 6:56 pm #156722Erik D. SlaterMemberIf we guess the links, do we get a prize? π
What is your default layout under Genesis -> Theme Settings?
Erik D. Slater: Digital Platform Consultant β’ LinkedInJune 18, 2015 at 7:07 pm #156723delightMemberFull width layout in theme setting.
http://fabellastudios.com/services/ This page isn't full width
http://fabellastudios.com/about/ I need it to be full with like this page
Thanks.
June 18, 2015 at 7:23 pm #156724Erik D. SlaterMemberAhhhh ... it is actually "full width".
What you are talking about is the entire width of the screen.
I would advise against doing this since it isn't particularly user-friendly ... at least in terms of scanability for the user.
I'm curious about two things:
(1) What CSS changes have you applied so far that modified the width?
(2) What size of screen are you working on?
Erik D. Slater: Digital Platform Consultant β’ LinkedInJune 18, 2015 at 7:32 pm #156726delightMember.home-even,
.home-odd {
font-size: 22px;
}
}This is the code I used to modify the page.
It still looks the same on mobile and I like that, I don't like the way it looks on desktop............I don't know I think I have a 23" monitor...........
I am wondering why the code didn't apply to the new sub cats I added...........
Thanks.
June 18, 2015 at 8:08 pm #156731Erik D. SlaterMemberOK. I see what you've done here ... and the reason I asked about your screen size was because some people build their site based on what they see on their screen.
The code you provided above will only change the font size of the home page. But actually, you have made other changes too ... and they can be seen at the bottom of your style.css file ... which includes targeting .site-inner on only the About page (using the page ID), as well as .wrap on all pages ... both of which are giving the entire screen width effect.
I want to address a couple of fundamental things here.
I always advise against using the page ID to identify specific pages. It is not always guaranteed to identify the page you want should you ever need to move your installation. I have seen things go wrong ... then the site needs to be rebuilt ... and pages don't get added in the same order ... and so your About page no longer uses the .page-id-15 class.
If you want to target specific pages, you can use the Custom Body Class in your page editor ... which will always be associated with that page, no matter what happens.
Also, you should never add CSS definitions below your media queries. I have seen some people make this recommendation ... and it is simply wrong for one very important reason: they will override any associated definitions that are defined in those media queries ... which will then take effect on other devices such as mobile, tablets and laptops, or even desktops with lower screen resolutions ... oh yes - they're still out there π
I would recommend that you remove all of those style.css file changes that you have applied thus far from line 2089 onwards. Otherwise, I fear you will run into some horrible difficulties in the not-so-distant future π
If you want to change the font size of the home page even/odd areas, you can find the definitions around line 1160 and modify those accordingly.
Hope this helps π
Erik D. Slater: Digital Platform Consultant β’ LinkedInJune 18, 2015 at 8:46 pm #156737delightMemberThanks for the info.
It's disturbing to me that I came to this forum and asked a question a few weeks about page width and the response to fix said issue was to add the code I provided you above.
Now I will have to take the time to address that issue and hope nothing else gets messed up in the process.
Thanks again for the help.
June 19, 2015 at 7:08 pm #156871ChristophMember@delight IΒ΄m sorry my advice disturbs you.
What I told you two weeks ago is still valid for the question you asked.
I think itΒ΄s the first time that I partially disagree with Eric on something. πI always advise against using the page ID to identify specific pages. It is not always guaranteed to identify the page you want should you ever need to move your installation. I have seen things go wrong … then the site needs to be rebuilt … and pages don’t get added in the same order … and so your About page no longer uses the .page-id-15 class.
As long as you use the same database the page/post id stays the same no matter what.
If something gets so mixed up in the database that the page-id's are not consistent anymore you are in a lot more trouble than the about page not being full-width.
If we are talking about copying theme files into a new WordPress installation, and recreating the pages by hand, than I can see the point, although you would have to apply the custom body class to the new about page again too...To avoid this situation, I recommend you create backups frequently.
Also, you should never add CSS definitions below your media queries. I have seen some people make this recommendation … and it is simply wrong for one very important reason: they will override any associated definitions that are defined in those media queries … which will then take effect on other devices such as mobile, tablets and laptops, or even desktops with lower screen resolutions … oh yes – they’re still out there π
@Eric And as fast as that, we are in agreement again.
To the question where to place this code I replied:
"Wherever you like.
To make it easier to find in the future, you could add it at the very bottom of the file."
@delight I did not intend to give advice to place code there in general. I apologize for not taking the time to explain that this is not a good place to insert code, but for this short snippet, it doesn't hurt to put it there.
IΒ΄m sorry for rushing my answer not taking the time to explain better practices.Thanks for catching this Eric.
Sincerely,
Christoph
June 19, 2015 at 11:01 pm #156898Erik D. SlaterMemberAs long as you use the same database the page/post id stays the same no matter what
That's very true ... and I did say that "It is not always guaranteed" π But ...
The risk of damaging the WordPress installation is significantly higher when you work directly with the backend database ... and while you and I may not have an issue dealing with MySQL tables and SQL queries, most WordPress users never know it exists. Not all recovery processes are of a clean nature, i.e. many are partial recoveries. While the file import process is intelligent enough to know if a page/post already exists, if a page/post has changed in the meantime - and a new import takes place - a new version of that page/post will be created. The user will then remove the old version ... and that is when a new page-id gets created ... but the custom body class will remain the same. This is the sort of scenario that I have seen happen on more occasions that it probably should π
It should also be noted that the custom body class is a Genesis Framework feature. Regular WordPress doesn't provide this option.
I did not intend to give advice to place code there in general. I apologize for not taking the time to explain that this is not a good place to insert code, but for this short snippet, it doesn’t hurt to put it there.
IΒ΄m sorry for rushing my answer not taking the time to explain better practices.I actually wasn't directing my "seen some people make this recommendation" comment at you π And there are times when we do need to make a judgement call on the advice we provide ... which may be based on the OP, the issue in hand, etc.
There are cases where the CSS file that needs to be updated is a separate custom file ... or even inline stuff ... which gets loaded after the main style.css file ... which effectively adds CSS after the media queries definitions π In those cases, they tend to be overrides of CSS defined in the main file, and so any media queries overrides would be included in those too.
And besides ... I've seen a lot of the advice you have given ... and I usually find myself nodding in agreement π
Erik D. Slater: Digital Platform Consultant β’ LinkedIn -
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.