Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • March 10, 2026 at 7:48 pm #1495923
    debbiepeverelli

    I’ve built my website with the Enfold Parallax theme. I’m very happy with the results! However, on mobile view there are a few pictures (4 in total, at 2 different positions) that are cropped and placed wrongly, which I can’t seem to fix. On desktop view they are perfect. There’s a larger picture and a smaller one overlaps. In mobile view the larger picture appears smaller than the original smaller one. This way it doesn’t look nice at all. Could you please help me fix this issue?
    Additionally, I have a question about the contact form. When I fill in an address, the space turns light blue and when I press send, the form turns green. These colors don’t match the colors of my website at all. Also, the text that appears after sending a message isn’t the typography I chose for my website and it also doesn’t match the rest of my website.

    Looking forward to your response.

    March 11, 2026 at 6:17 am #1495936
    Ismael

    Hey debbiepeverelli,

    Thank you for the inquiry.

    1. The overlapping image is likely due to the absolute positioning, which causes it to appear incorrectly scaled on smaller screens. The best approach is to either hide it on mobile or manually adjust its size using css media queries.

    You may need to apply a custom css class name to the overlapping image element.

    — https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

    Once you have added a custom class, for example av-overlap-image, you can target it on smaller screens like this:

    
@media only screen and (max-width: 767px) {
    .av-overlap-image {
        display: none;
    }
}

    Or if you prefer to keep it visible but resize it:

    
@media only screen and (max-width: 767px) {
    .av-overlap-image {
        width: 80px;
        height: auto;
        top: 20px;
        left: 10px;
    }
}

    You can add these css rules to Enfold > General Styling > Quick CSS field and adjust the values as needed.

    2. The light blue highlight on focused fields and the green success message are default styles applied to the contact form. You can override them by adding the following to Enfold > General Styling > Quick CSS field — adjust the color values to match your site:

    
#top .avia-form .avia-input:focus,
#top .avia-form .avia-textfield:focus {
    background-color: #yourcolor;
    border-color: #yourcolor;
}

#top .avia-form .avia-success {
    background-color: #yourcolor;
}

#top .avia-form .avia-success p {
    font-family: inherit;
    font-size: inherit;
    color: #yourcolor;
}

    Replace #yourcolor with the hex values that match your site palette.

    Let us know the result.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.