Adding some CSS

  • sacconi

    (@sacconi)


    1 year ago

    I recently added the following css rule:

    /**
     * sfondo breadcrumbs nel widget solo cellulari-tablet
     */
    @media only screen and (max-width: 769px){ #bcn_widget-2 {
       background-color:#c2e9ee;
        padding-left:8px;
        padding-right: 8px;
        }
    }

    My purpose is having the same effect than on this other page: https://www.sacconicase.it/22_it_Lignano-sabbiadoro__7928_appartamento_vacanze.html (at the moment only on mobile version)

    So that I need to have the background space without any margin on the left-side (I have already another rule to fix?), I need a shadow in the right side of the light-blue strip, and the last element of the breadcrumbs should be bold. I should reply exactly the background color and the paddings- thank you

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Manuel Camargo

    (@sirlouen)

    1 year ago

    Hello @sacconi this is a CSS related topic, and this is a WordPress forum, so its not the best place to ask this kind of questions. This is more about fixing WordPress-related sites, not websites in general.

    This said, note that your bcn_widget-2 is a section side a larger container (aside), and aside is again, inside another even larger container, a div inside a body, which happens to have a padding of 20px. The limitation to remove margins, is not provoked by that widget but by the body. There are multiple ways to solve this, but the easiest could be fixing the width of the body first, and adding the padding to the elements inside, like main. It might require a little more fixing than this because if you remove those paddings everything is going to lose that.

    durdesh

    (@durdesh)

    1 year ago

    @media only screen and (max-width: 769px) {
        #bcn_widget-2 {
            background-color: #c2e9ee;
            padding: 0 8px;
            margin-left: 0 !important; /* Ensure no gap on the left */
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* right-side subtle shadow */
        }

        #bcn_widget-2 .breadcrumbs span:last-child {
            font-weight: bold; /* Make the last breadcrumb bold */
        }
    }

    Use it.

    Thread Starter sacconi

    (@sacconi)

    1 year ago

    I cant see any shadow 🙁

    Thread Starter sacconi

    (@sacconi)

    1 year ago

    I need an inner and blurred shadow, only right side..how can I do it? thank you

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Adding some CSS’ is closed to new replies.

Tags