Navigation
Archive / Promo Image – Unwanted line
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • January 20, 2017 at 12:44 am #1337945
    mittavalley
    Participant

    Hi there,

    I wanted to set a clickable image in Promo setting and have been following this link instruction. I could get the clickable image to the linked page which is excellent.

    However, there are a few side effect issues:
    1.) There is a line on top of image that is unnecessary. I toggled it from the web browser and found that it links with
    class .x-promo { border: 1px solid ; }. Please see the images.

    2.) The promo shortcode [/promo] was pushed out to display underneath the image border if I coded in!! Please see the image. But if [/promo] wasn’t added in the code it is alright which is strange to me. Shouldn’t it need [/promo] to close the coding?

    Thank you.
    Regards,

    January 20, 2017 at 12:58 am #1337967
    Friech
    Moderator

    Hi There,

    Thanks for writing in! #1 Add this on your custom CSS

    .x-promo.test {
	border-width: 0;
}

    #2 Please show us your entire promo shortcode. Have you try using:

    [x_promo] and [/x_promo]

    Cheers!

    January 20, 2017 at 5:34 am #1338216
    mittavalley
    Participant

    Hi Friech,

    Thanks for promptly reply.

    1.) I amended slightly to

    .test .x-promo {
    border-width: 0;
    }

    Please see the images. When I did according to your recommendation,the image moved up or no space between left border and image.

    2.) You are brilliant!! Solved.

    Thanks so much.

    January 20, 2017 at 9:00 am #1338389
    Joao
    Moderator

    Hi There,

    I am confused, do you still need help with anything?

    If yes please share the shortcode with us, thanks.

    Joao

    January 22, 2017 at 6:41 pm #1340843
    mittavalley
    Participant

    Jao,

    All done. Just to explain what I did that’s it.

    Regards,

    January 22, 2017 at 8:29 pm #1340953
    Nico
    Moderator

    Happy to hear that.

    Thank you so much for sharing the solutions or the things you did. It would really help a lot.

    🙂

    January 24, 2017 at 9:32 pm #1344170
    mittavalley
    Participant

    Hi there,

    I was trying to reduce the size of Promo container similar to the Recent Works that are displayed in this link http://demo.theme.co/renew-1/. I was trying with x-promo-content class but it didn’t work. I was also trying to enlarge image by change the width and height in the shortcode to be the same as the x-promo-content but it didn’t work.

    [x_promo]Primary School[container] Eskdale Primary School [/container][/x_promo]

    It makes me observe that there are 2 divs that are the same class but has different container sizes in the attached pictures.

    Thank you ver much.
    Regards,

    January 25, 2017 at 4:11 am #1344454
    Paul R
    Moderator

    Hi,

    Your promo shortcode is incorrect. Kindly refer to the link below for your guide.

    Promo

    Hope that helps.

    January 26, 2017 at 9:03 pm #1347216
    mittavalley
    Participant

    Hi Paul,

    What do you mean it is incorrect shortcode? If you mean to use [promo] and[/promo] I had a problem using it refer to my top message and was suggested to use [x_promo] and [x_promo].

    I would like to reduce margin of all borders of images.

    Thank you.

    January 26, 2017 at 11:49 pm #1347317
    Paul R
    Moderator

    Hi,

    Please remove px in your width and height.

    eg.

    
[x_promo]<a href="http://www.mittavalley.dev/live/" target="_blank"><img src="http://www.mittavalley.dev/wp-content/uploads/2016/11/2EDQ5031-min.jpg" alt="Primary School" width="274" height="223" /></a>[container] Eskdale Primary School [/container][/x_promo]

    If that doesn’t help, plesae provide wordpress admin login in private reply so we can take a closer look.

    Thanks

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1337945 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>