Tagged: ,

Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • #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.

    #875625

    Hey 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,
    Mike

    #875627

    Hey 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.

    #875628

    Hi,
    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,
    Mike

    #875744

    Hello 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.

    #875754

    Hi,
    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,
    Mike

    #875755

    Oh 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.

    #875765

    Hi,
    Strange, try this:

    #top .main_color.fullsize .template-blog .post_delimiter {border-color: transparent!important;}

    Best regards,
    Mike

    #876539

    Brilliant :) works like a charm!
    Thank you Mike.

    #876593

    Update:
    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 ago by VJLoops-GT.
    #877632

    Update #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

    #877751

    Hi,

    There is no automatic way for that we are afraid.
    They would have to be edited one by one

    Best regards,
    Basilis

    #877819

    Hello

    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 ?

    #878425

    Hello again
    Any update ?

    #878486

    Hi,

    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,
    Nikko

    #878489

    Hey 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

    #878504

    Hi,

    It’s working, are you referring to the image to have 100% width also?

    Best regards,
    Nikko

    #878507

    Hello,

    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!

    #878603

    Hi,
    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,
    Mike

    #878643

    Hey,
    Now it’s perfect :) thank you so much!

    Elad.

    #878653

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 21 posts - 1 through 21 (of 21 total)
  • The topic ‘Different Width for each page – why’ is closed to new replies.