Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • February 7, 2022 at 12:37 pm #1339321
    markus-fischer

    Hello,

    I would like to set a Maximum Width for one Specific Page on my website. How can I define that? Is there a Quick CSS for that purpose or another way?

    Thank you,
    Markus

    February 7, 2022 at 12:40 pm #1339324
    Yigit

    Hey Markus,

    Thanks for contacting us!

    Please add following code to Quick CSS field in Enfold theme options > General Styling tab

    
.page-id-1195 .container {
  max-width: 990px;
}

    1195 in the code is page ID. Please replace it with your page’s ID :)

    Regards,
    Yigit

    February 7, 2022 at 2:47 pm #1339365
    markus-fischer

    Hey Yigit,

    Very helpful! Where do I find the Page ID though?

    Thanks again,
    Markus

    February 7, 2022 at 2:50 pm #1339367
    markus-fischer

    The URL shows this when I’m in the page on WordPress: post.php?post=30&action=edit

    I tried these 2 codes, however it doesn’t work:

    .page-id-30 .container {
    max-width: 990px;
    }

    .post-id-30 .container {
    max-width: 990px;
    }

    February 7, 2022 at 2:51 pm #1339368
    Yigit

    Hi Markus,

    You can edit your page and find the page ID in address bar of your browser – https://imgur.com/a/qGZ6t4R

    Cheers!
    Yigit

    February 7, 2022 at 2:52 pm #1339369
    markus-fischer

    Please see the actual page in private content below, if it helps. Thank you! :)

    February 7, 2022 at 2:52 pm #1339370
    Yigit

    Hey,

    If it is a post, CSS code should be as following 

    .postid-30 .container {
max-width: 990px;
}

    Cheers!
    Yigit

    February 7, 2022 at 2:54 pm #1339373
    markus-fischer

    Hey Yigit,

    I tried it, however it doesn’t work. Please see the full URL string in private content below and also the page for reference.

    What do you think?

    February 7, 2022 at 2:54 pm #1339374
    Yigit

    Hey,

    Following code should have worked

    .page-id-30 .container {
max-width: 990px;
}

    Please try following

    #top.page-id-30 .container {
max-width: 990px;
}

    If that does not work either, please copy your CSS code and paste it on – https://pastebin.com/ and share the link here so we can check it for errors.

    Regards,
    Yigit

    • This reply was modified 3 years, 2 months ago by Yigit.
    February 7, 2022 at 2:59 pm #1339378
    markus-fischer

    Hi Yigit,

    Unfortunately it still doesn’t work.

    Here’s the Quick CSS code I have entered so far – please see private content below.

    Thanks in advance for checking!

    February 7, 2022 at 3:03 pm #1339380
    Yigit

    Hi,

    There is no error in your CSS. If you are using CSS file merging and compression in Enfold theme options > Performance, please temporarily disable it and check if that helps. Also, if you are using a cache plugin, please make sure to clear cache.

    Cheers!
    Yigit

    February 7, 2022 at 3:22 pm #1339383
    markus-fischer

    Hi Yigit,

    I disabled “CSS file merging and compression in Enfold theme options > Performance” and also cleared the cache on my laptop. Nevertheless the issue is not resolved yet.

    How does the page (link below) display on your laptop/desktop, in full width or not?

    I tried out the following codes after the disabling and cache clearing:
    .page-id-30 .container {
    max-width: 990px;
    }

    .post-id-30 .container {
    max-width: 990px;
    }

    #top .page-id-30 .container {
    max-width: 990px;
    }

    February 7, 2022 at 3:36 pm #1339389
    Guenni007

    Post ID’s have no additional hyphen. – Page ID’s do have
    so if it is a page with ID : 30 the class on the body tag ( #top ) is: page-id-30
    it is a post with ID : 30 the class on the body tag ( #top ) is: postid-30

    you find those classe as mentioned above on the body tag. ( #top )
    so there is no space between #top and the class : #top.postid-30 or #top.page-id-30
    ( that was a small careless mistake by Yigit )

    it will be :

    #top.page-id-30 .container {
  max-width: 990px;
}
/*** or if it is a post ***/
#top.postid-30 .container {
  max-width: 990px;
}
    February 7, 2022 at 3:53 pm #1339396
    Guenni007

    by the way : In the other topic I advised you to use a custom class. Otherwise, this code will also affect all other grid rows.

    @media only screen and (min-width:768px) {
	.flex_cell.avia-builder-el-first {
	    padding-left: calc(50% - 655px) !important;
	}

	.flex_cell.avia-builder-el-first .flex_cell_inner {
	    padding: 30px 50px !important;
	}
}

    You always have to remember that if it is not to apply globally.

    February 7, 2022 at 7:36 pm #1339440
    Yigit

    Hi,

    Thanks for your help @guenni007 and thanks for pointing out my mistake too. It would probably take some time for me to notice that :) I updated my post.

    Best regards,
    Yigit

    February 7, 2022 at 8:59 pm #1339455
    markus-fischer

    Thanks for noting that, @guenni007! :-)

    So I have input the following 4 Quick CSS now and the page width is still not adjusted: https://negotiations-masterclass.com/reviews/

    #top.page-id-30.container {
    max-width: 990px;
    }

    .page-id-30 .container {
    max-width: 990px;
    }

    #top.postid-30 .container {
    max-width: 990px;
    }

    .postid-30 .container {
    max-width: 990px;
    }

    I also disabled “CSS file merging and compression in Enfold theme options > Performance” and also cleared the cache on my laptop. Nevertheless the issue is not resolved yet.

    What do you think is happening here and how can we resolve it?

    February 8, 2022 at 7:31 am #1339527
    Ismael

    Hi,

    It is not working because the default styling overrides the custom css.

    .responsive .container {
    max-width: 1310px;
}

    Try to prepend the “.responsive” selector to the current one to make it more specific.

    Example:

    .responsive .page-id-30 .container {
    max-width: 990px;
}

    Best regards,
    Ismael

    February 8, 2022 at 9:50 am #1339546
    markus-fischer

    Hi @Ismael,

    Fantastic! It works! (See link attached for reference)

    However, the custom CSS now also affects the header. I would like the header to appear consistent across all pages.

    What do I need to add so that the header is excluded from the custom CSS?

    Thank you again!!

    February 8, 2022 at 12:11 pm #1339583
    Yigit

    Hi,

    Please use the code as following

    .responsive .page-id-30 #main .container {
    max-width: 990px;
}

    Best regards,
    Yigit

    February 8, 2022 at 1:12 pm #1339598
    Guenni007

    Something to learn for you ( @markus-fischer ) – when a class is directly on another tag ( like the #top (body tag) ) the class comes without space to the tag.
    #top.page-id-30 if you want to be more specific to a selector ( like here .container ) you can have in front tags of a parent element.
    so – if there are spaces that is the next child in the DOM.

    so your noted rule:

    #top.page-id-30.container {
max-width: 990px;
}

    is wrong because the container class belongs to a child element of #top ( grand-child etc. ) to the .page-id-30 – there must be space between.
    page-id-30 – is part of the body tag ( #top) and no child – then you must avoid a space right notation would be:

    #top.page-id-30 .container {
    max-width: 990px;
}
    February 9, 2022 at 1:19 pm #1339796
    markus-fischer

    Thank you @yigit @guenni007

    It’s working now! :-)

    February 9, 2022 at 2:33 pm #1339804
    Mike

    Hi,
    Glad @yigit & @guenni007 could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 22 posts - 1 through 22 (of 22 total)
  • The topic ‘Set Maximum Width for Specific Page’ is closed to new replies.