-
AuthorPosts
-
November 10, 2017 at 2:48 pm #875167
Hello,
I want to make all my pages reach the same width.
At the moment it’s different for some pages, for example :Is it possible to make 1 width for all the pages on the website?
Thanks in advance!
Elad.November 12, 2017 at 12:50 am #875625Hey VJLoops-GT,
The first one has a “entry-content-header” width of 100%
the second one has a max-width of 40em, so to remove the extra 32px margin Try this code in the General Styling > Quick CSS field:#top .fullsize .template-blog .post .entry-content-wrapper > * { max-width: 100% !important; }
The reason is one is a blog page and the other is a archive page.
Best regards,
MikeNovember 12, 2017 at 12:56 am #875627Hey Mike,
That works perfectly – thank you.
Is there a way to apply that to all pages? so all of them will be the same width?
(or maybe it’s already the correct way to apply it fully?)I know probably nobody will notice it, but it’s requested from the client :)
Thanks in advance,
Elad.November 12, 2017 at 1:11 am #875628Hi,
I believe this should correct it as there is only the two types of pages, if you find another page that is different let us know and we will try to help again.Best regards,
MikeNovember 12, 2017 at 2:46 pm #875744Hello again,
I have tried to apply the same method, this time with #news_landing,
to the News part (in red) – but no luck.I gave both the blog element & the color section the class “news_landing”.
and in quickCSS:
#news_landing {color: #e6d2b5 !important; }
but it’s not working.What have I done wrong?
thanks again Mike.
Elad.November 12, 2017 at 3:59 pm #875754Hi,
On you page news_landing is a class not an id, so change your code to a dot instead of a hash:.news_landing,.news_landing a {color: #e6d2b5 !important; }
note that I added a comma with the class again followed by an “a”, this targets the links in that section also.
Best regards,
MikeNovember 12, 2017 at 4:13 pm #875755Oh I see my mistake – CSS noob mistakes :) thank you for your help.
and by the way, something I noticed that happens on my extra wide monitor – but not if I scale the browser to a normal size:
https://www.dropbox.com/s/1rh3i9ci84u7jxr/line.jpg?dl=0
(this 1 pixel line bug)Not a big deal since most people don’t use my resolution..but maybe worth checking it out…
Thanks again Mike,
Elad.November 12, 2017 at 5:34 pm #875765Hi,
Strange, try this:#top .main_color.fullsize .template-blog .post_delimiter {border-color: transparent!important;}
Best regards,
MikeNovember 14, 2017 at 11:27 am #876539Brilliant :) works like a charm!
Thank you Mike.November 14, 2017 at 2:52 pm #876593Update:
Is it possible to adjust the width on this page as well?I would love o reduce the size of the whole page so it will align with the events entry “25.11….”
Thanks again
- This reply was modified 7 years, 1 month ago by VJLoops-GT.
November 16, 2017 at 6:00 pm #877632Update #2:
The width is different in this page as well : http://maratone-soundsystem.net/wordpress/soundsystem-history/
Is there a way to apply the width limit for all pages, old or new?
Thanks again
November 16, 2017 at 9:18 pm #877751Hi,
There is no automatic way for that we are afraid.
They would have to be edited one by oneBest regards,
BasilisNovember 16, 2017 at 11:04 pm #877819Hello
I see, no problem – I can do it manually, but how?
I try to figure out what part of the code you gave me before, tells the CSS which page am I referring to:
#top .fullsize .template-blog .post .entry-content-wrapper > * {
max-width: 100% !important;
}if I want to take page X, where do I enter the page ID ?
November 18, 2017 at 9:31 am #878425Hello again
Any update ?November 18, 2017 at 11:23 am #878486Hi,
Nothing in your css code tells what page it will apply, I think the code you are referring to should look like this:
#top.page-id-xx .fullsize .template-blog .post .entry-content-wrapper > * { max-width: 100% !important; }
where you replace xx with the right page id. To know the page id of the a specific page, please check: https://www.competethemes.com/blog/find-page-id/
Hope this helps :)Best regards,
NikkoNovember 18, 2017 at 11:29 am #878489Hey Nikko,
Thank you for the code.
I followed your instructions but it is somehow not working.
For example, this page: http://maratone-soundsystem.net/wordpress/soundsystem-history/
(Page ID 57)I entered the code:
#top.page-id-57 .fullsize .template-blog .post .entry-content-wrapper > * { max-width: 100% !important; }
but the width of the page stays the same
November 18, 2017 at 11:45 am #878504Hi,
It’s working, are you referring to the image to have 100% width also?
Best regards,
NikkoNovember 18, 2017 at 11:50 am #878507Hello,
On my system the width of the history page is much wider than other pages (for example): http://maratone-soundsystem.net/wordpress/events/
The client asked that all pages should have the width of the Events page.
The news/archive pages are already fixed, but the History page is wider.I tried from 2 browsers.
What did I miss?
Thank you again NIkko!November 18, 2017 at 6:29 pm #878603Hi,
The page http://maratone-soundsystem.net/wordpress/soundsystem-history/ is using the stretched page template, to correct these pages please add this css:#top.page-template-default.stretched .entry-content-wrapper {max-width: 800px !important; margin: auto; }
Please clear site and browser cache and review.
Best regards,
MikeNovember 18, 2017 at 9:15 pm #878643Hey,
Now it’s perfect :) thank you so much!Elad.
November 18, 2017 at 10:11 pm #878653 -
AuthorPosts
- The topic ‘Different Width for each page – why’ is closed to new replies.