Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • January 16, 2017 at 7:53 pm #734329
    creativeyes

    Hi

    I’m in the process of creating a new banner for this website but I want it to be full bleed like the ones below. I’ve created it in two halves because I want them to go one below the other when viewed on smaller screen sizes. I also don’t like the little white marks in the middle top and bottom.

    Thanks
    Rupert

    January 17, 2017 at 8:02 am #734535
    Rikard

    Hey Rupert,

    Please try the following in Quick CSS under Enfold->General Styling:

    .page-id-2532 #av_section_1 .avia-image-container-inner {
    border-radius: 0 !important;
}

.page-id-2532 #av_section_1 .container {
    padding:0 !important;
}

    Best regards,
    Rikard

    January 18, 2017 at 4:29 pm #735404
    creativeyes

    Thanks Rikard

    A few tweaks. The images are going under the header and can be seen but I can’t work out how to drop them down. Plus there’s a little white nick in the bottom
    https://theimplantcentre.com/wp-content/uploads/2017/01/TIC_Fireworks1.jpg

    When viewed on smaller screens there’s white spacing around and in between the two images
    https://theimplantcentre.com/wp-content/uploads/2017/01/TIC_Fireworks2.jpg

    I also want to remove the roll over tint and circle. i.e. so nothing happens but it’s still clickable to link to the page
    https://theimplantcentre.com/wp-content/uploads/2017/01/TIC_Fireworks2.jpg

    January 20, 2017 at 1:09 pm #736413
    creativeyes

    Please can you respond asap as I’m being pressured by my client to get this banner live on the homepage.

    January 21, 2017 at 7:46 am #736730
    Vinay

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 767px) {
.responsive #top.page-id-2532 #wrap_all .container {
    width: 100%!important;
    max-width: 100%!important;
}
.responsive #top.page-id-2532 #wrap_all .flex_column {
    margin-bottom: 0px!important;
}}

    The above code will remove the padding and margin for all the containers on the page. To target specific containers enable custom css class name support of add the banner elements inside a color section and give it a unique ID to target only the banner section.

    Best regards,
    Vinay

    January 22, 2017 at 10:09 am #736927
    creativeyes

    Thank you, that has resolved the spacing around the two banners at all screen sizes.

    Two other things:
    1. I still want both banners to be clickable and link to the chosen page but I want to remove the tint and the arrow graphic on roll over (so there’s no visual change).
    https://theimplantcentre.com/wp-content/uploads/2017/01/TIC_overlapping.jpg
    2. The two panels look like they are slightly overlapping which is creating a faint line between the two, plus there’s a little white nick top and bottom – it looks like both boxes have slightly rounded corners.
    https://theimplantcentre.com/wp-content/uploads/2017/01/TIC_overlapping1.jpg

    January 23, 2017 at 3:43 pm #737283
    creativeyes

    Please can you respond asap as I’m being pressured by my client to get this banner live on the homepage.

    January 25, 2017 at 7:42 pm #738537
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    img.avia_image {
    border-radius: 0!important;
}

    Best regards,
    Yigit

    January 25, 2017 at 8:32 pm #738558
    creativeyes

    I’ve added that but it doesn’t seem to have made any difference.

    January 27, 2017 at 6:03 am #739205
    Vinay

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    1. To hide the overlay on the banners

    .image-overlay {
 visibility: hidden;
 }

    2. The faint line you see is in the banner graphics. Please render the graphics again without the faint line.

    Best regards,
    Vinay

    January 31, 2017 at 12:16 pm #740581
    creativeyes

    I’ve re-rendered both the graphic (left) and the animation (right) without the faint line but it’s still showing https://theimplantcentre.com/. It looks like it’s being caused by the two panels overlapping?

    February 3, 2017 at 9:37 pm #742583
    Vinay

    Hi,

    The faint line is a lot less now please see the attached screenshot. If the images are rendered properly the line should completely disappear. It does not appear to be a overlapping issue. Just to test you can duplicate the page and insert 2 black images and that should clear your doubt :)

    Best regards,
    Vinay

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