Tagged: 

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • June 29, 2017 at 10:58 am #814344
    craig_corfield

    Hi Enfold,

    I would like to make an image responsive so that it always takes up the full width of the column it is in.

    How do i do that?

    Thank you

    You will see that i currently have a background image but want to make it clickable so would rather have a proper image in its place.

    June 29, 2017 at 11:35 am #814357
    Sarah

    Hey craig_corfield,

    Can you try putting an image NOT inside a column? This way, it becomes a full-size image and will span the width of the screen.

    I looked at your website and I’m not sure which section you’re pertaining to. Sorry, can you point out which one you mean?

    Best regards,
    Sarah

    June 29, 2017 at 3:09 pm #814517
    craig_corfield

    Hi Sarah,

    I would need 5 images next to each other as it is currently with the button links below each of them.

    It is the section on the home page right below the nav bar.

    I currently have the 5 images next to each other using the background for each column but i would like the whole section to be clickable so i believe that will be the best solution.

    Any ideas?

    Thank you

    June 30, 2017 at 8:49 am #814857
    Victoria

    Hi craig_corfield,

    You can use masonry gallery, you can achieve the same layout with it and have captions at the bottom like you have.
    http://kriesi.at/themes/enfold/shortcodes/masonry-gallery/

    Masonry Portfolio

    If you need further assistance please let us know.
    Best regards,
    Victoria

    • This reply was modified 7 years, 4 months ago by Victoria.
    June 30, 2017 at 11:48 am #814924
    craig_corfield

    Hi Victoria,

    Ok so i have changed the image sizes and put an overlay but now there is a gap between the image and the button that i dont want to be there. How do i remove that whitespace gap between the images and the button?

    Craig

    June 30, 2017 at 11:50 am #814925
    craig_corfield

    Also how do i remove the rounding out of the fullwidth button as its creating some white spaces which i dont want?

    Thank you

    July 5, 2017 at 9:30 pm #816887
    Basilis

    Hi,

    I am sorry – we did not replied because not sure, which one is the fullwidth button, so we can understand which one you mean and we can provide the proper code?

    Best regards,
    Basilis

    July 9, 2017 at 8:06 pm #818460
    craig_corfield

    I have created a screenshot, it is the button below each image on the home page that needs to have the rounding removed. Thank you

    July 10, 2017 at 3:26 am #818503
    Mike

    Hi,
    Try this code in the General Styling > Quick CSS field:

    body div .avia-button {border-radius: 0px !important; }

    Best regards,
    Mike

    July 10, 2017 at 12:29 pm #818679
    craig_corfield

    Hi Mike,

    Thank you, it is close to what i want. I just want to do it for those particular buttons. So far i am unable to see where i enter the button class or ID so i have used that code and just added the page ID:
    .page-id-4808 .avia-button {border-radius: 0px !important; }
    Is it possible to add it just for that section of buttons?

    Thank you

    July 10, 2017 at 5:45 pm #818891
    Victoria

    Hi craig_corfield,

    This will make the rules apply, just to that first row of buttons

    
.page-id-4808 #av-layout-grid-1 .avia-button {border-radius: 0px !important; }

    If you need further assistance please let us know.
    Best regards,
    Victoria

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