Set page width on one page only?

AbbasAbbas Member Posts: 65

Hi,

Can anyone help?

We need to set the page width to 2400px for a virtual exhibition page only?

Any advice or suggestions would be greatly appreciated!

For this page - https://www.waterstreetgallery.co.uk/en/exhibitions/current/virtual-spring-exhibition-2020/

I have tried this but no joy

.category_id-10053205 .theme-boxed .parenter {

   max-width: 2400px;

}

All the best & Stay safe

6 comments

  • AbbasAbbas Member Posts: 65

    I also need to remove the read more function from this page only


    Thank you in advance for any advice

  • JoeyJoey Administrator, Moderator, Lightspeed Staff Posts: 269 moderator
    edited May 2020

    Hi @Abbas

    It has been very busy these days so apology for the late reply. To set the width for only that page you will need to include the unique category ID in the body as a class.

    For example you can use:

    <body {% if catalog %}class="{{ catalog.category_id }}"{% endif %}>

    or if your category page is set to the Text type:

    <body {% if textpage %}class="{{ textpage.category_id }}"{% endif %}>


    To hide the read more button on larger screens you should look at using CSS Media Queries.

    eCom Support Team
    Lightspeed HQ
  • AbbasAbbas Member Posts: 65

    Hi Joey,

    Thanks for that!

    This is the code on that page -

    <p>Explore our Digital Spring Exhibition</p>

    <p>Step inside Water Street Gallery and experience our Virtual Spring Exhibition from the comfort of your home, or wherever you are staying in these strange times.<br />Immerse yourself in a seeing the wide variety of genres and styles our gallery artists and lift your spirits with fine art. Landscape, Still Life, Assemblage, Original Prints, Expressive, Abstract and Urbanscape are all featured.</p>

    <p style="padding-top: 20px; padding-bottom: 20px;"><img src="https://static.webshopapp.com/shops/242033/files/179167667/contactsheet-0012.jpg" width="1200" height="225" /></p>

    <p>We hold in storage a good selection of most artists works, so are not hampered by the lockdown or deliveries.<br />and are exhibiting some works not seen for a while. </p>

    <p>As soon as we can we will open our doors to you all, and give a warm welcome to you all.</p>

    <p style="padding-top: 20px; padding-bottom: 20px;"><img src="https://static.webshopapp.com/shops/242033/files/179170088/contactsheet001.jpg" alt="" width="1300" height="289" /></p>

    <p style="text-align: justify;">MORE TEXT</p>

    <p>[powr-media-gallery id="fca1b658_1589213855"]</p>


    Where would I add it ? Does it just need to go anywhere? it is a overview/index page.


    Best regards

  • JoeyJoey Administrator, Moderator, Lightspeed Staff Posts: 269 moderator

    The <body> tag is located in the custom.rain template file.

    eCom Support Team
    Lightspeed HQ
  • AbbasAbbas Member Posts: 65

    I added it here

     <body id="body" class="{{ theme.theme_width }}">

         {% include 'snippets/header.rain' %}


         {% if catalog %}class="{{ catalog.category_id }}"{% endif %}


         <div class="content">

           {#{% include 'snippets/messages.rain' %}#}

           {% include template %} 

         </div>

          {% if template == 'pages/index.rain' and theme.product_popup_btn %}

         {% for product in popular %} {% set producttype = 'popular' %} {% include 'snippets/modal-product.rain' %} {% endfor %}

         {% for product in newest %} {% set producttype = 'newest' %} {% include 'snippets/modal-product.rain' %} {% endfor %}

         {% for product in featured %} {% set producttype = 'featured' %} {% include 'snippets/modal-product.rain' %} {% endfor %}

       {% endif %}

       {% if template == 'pages/collection.rain' and theme.product_popup_btn %}

       {% for product in collection.products %}

         {% include 'snippets/modal-product.rain' %}

       {% endfor %}

       {% endif %}


    Will that do it ?


    Thank you for all your help!

  • AbbasAbbas Member Posts: 65

    For the css is this correct?

    .page-id-10053205,.parenter.mro, .theme-boxed .mro { width: 2400px; !important; }

    Or do we need to use category_id ?

Sign In or Register to comment.