Editing Home page while keeping images hidden from desktop web browsers.

Currently the home page of the site - http://tinyurl.com/kwx84nn
has 4 images the first Large 10 Cyclists image which appears only on desktop devices while 3 other images appear only on mobile devices. When editing the page to add some new content e.g. some text, it seems to break that logic and all images become completely visible on both pc + mobile devices? Could someone please take a look to see why this is?

Support Access is open



  • Predrag Dubajic

    Hey Tom,

    Hope you're doing well today.

    Because of your current setup we had to use nth-child CSS selector for hiding those images.
    To explain further, you have number of <p> (paragraph) tags in your page, and new one is created by hitting enter while adding content. So we used nth-selector to select certain <p> tag, the one that has images.
    For example, your page looks like this:

    <p>Here is main image</p>
    <p>Here are smaller images</p>

    So now we use nth-child(1) and nth-child(3) to select first and third <p> tags and hide them on certain screen size.
    If you now add one enter before that main image when editing your page it will look like this:

    <p>Here is main image</p>
    <p>Here are smaller images</p>

    Now you would need to use nth-child(2) and nth-child(4) to hide them.

    Hope this clears things up.

    Best regards,

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.