We just built out our Teamraiser event. I am having trouble getting the secondary pages to be responsive

I am using page building for our secondary pages. The wrapper is responsive, but within page building we added a banner so it would look like it's part of the pagewrapper.. Does anyone know how I would make these pages responsive? I would appreciate any help I can get.

thank you,

Patti Posey - Stamford Hospital Foundation

Tagged:

Comments

  • @Patti Posey
    Hello Patti ?.

    While the wrapper is responsive, the image needs styling to tell it to be responsive and it looks like the way it was added to your pages is setting the width and height.

    Here's what you have on the page:

    <img src="../images/content/pagebuilder/HIM_banner_secondary_pages_1114.jpg" border="0" alt="HIM secondary banner" width="1130" height="339">

    Ideally, you'd fix it globally so you don't always have to apply the styling, but you can just replace the above with this and you will be in better shape:

    <img src="../images/content/pagebuilder/HIM_banner_secondary_pages_1114.jpg" border="0" alt="HIM secondary banner" style="display: block;width: 100%;">

    Hilary

  • @Hilary Engelbrecht
    Thank Hilary! Hope all is well with you.

  • @Hilary Engelbrecht This works except it won't allow me to link it to the registration page. Everytime I add the link the image disappears. Any suggestions? https://support.stamfordhospitalfoundation.org/site/TRR?pg=tfind&fr_id=1180&fr_tm_opt=new

    This is the link I am using


  • Will Hull
    Will Hull Blackbaud Employee
    Tenth Anniversary Name Dropper Kudos 1 Participant

    Hey there, @Hilary Engelbrecht

    If you're on the Plain Text Editor of the content editor, you can do it this way:

    <a href="https://support.stamfordhospitalfoundation.org/site/TRR?pg=tfind&fr_id=1180&fr_tm_opt=new" target="_self"><img src="../images/content/pagebuilder/HIM_banner_secondary_pages_1114.jpg" border="0" alt="HIM secondary banner" style="display: block;width: 100%;"></a>

    The a tag wraps around the image in the HTML to tell the browser that the image is linked. Then, you would save the page without going back to the WYSIWYG side of the content editor. This should then hold the link on the image.

    I hope you find this information helpful.