Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #615209

    Hi,

    I am using Enfold on a site where the sidebar contains invocation code from an ad server. The width of these ads is 300px. I have set the theme content sidebar ratio to be 70/30% and when viewed full-screen on most of the screens I’ve tried this works fine. However if someone has their browser window minimized, the ads can be cut off. Was just wondering if it was either possible to set a fixed width for the side bar and then remove it/move it to under the main content once the viewport hits a certain width (as I don’t want to compromise the quality viewing of the content either).

    I’m looking for a responsive widget (as other content in the sidebar seems to be fluid, it’s just my ad zones are not).

    Thoughts?

    Cheers,
    Marsha

    #615606

    I posted this and didn’t realise my support had expired. I have since renewed my support though I can’t see anywhere to add/re-add my purchase code. If you could please let me know if there’s anything else I need to do to have my topics addressed I’d be most grateful.

    Thanks,
    Marsha

    #616977

    Hi!

    Can you please post the link to your page where you have your ads?
    Sorry for the late reply!

    Cheers!
    Yigit

    #617012

    Will do as soon as I can Yigit (gave the credentials to Jordan earlier but have since had an issue with the server returning a 500 error). I’ll be back in touch as soon as it is accessible.

    #617023

    Hi Yigit, It seems it’s back up working now (though please ignore the ad zones that aren’t serving). These are served on the site differently to the ones in the sidebar which have Revive invocation code in an iFrame. Would Javascript be more fluid/responsive? I have added the credentials below.

    #618891

    Hey!

    We checked the site but there is no sidebar there. Did you replace it with the grid row element?

    Best regards,
    Ismael

    #631733

    Hi Ismael,

    Yes, I did replace it with a grid row element as I’ve seen recommended in the forum to others.

    However, I’m still having an issue with the ad zones which maybe can only be resolved by having a smaller advertisement in the sidebar (I thought it would cope with a MREC).

    Or is there some way of setting the 1/3 column in the grid row element to have a minimum width on the tablet viewport of 300px plus padding? Though I guess that will make the 2/3 column somewhat small.

    I’ve been checking on a mini iPad and the advertising banners are cut off which isn’t really acceptable.

    Any suggestions would be most appreciated.

    Cheers,
    Marsha

    #632847

    Hi,

    Do you mind posting a screenshot? A workaround is to create a duplicate of the grid row element but this time set the cells to 1/2 cells. Toggle the display property of the duplicated grid row with css media queries: http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/

    You can also try this in the Quick CSS field:

    #paszonecont_134910, #paszonecont_134910 > * {
        width: 100% !important;
    }

    Best regards,
    Ismael

    #633337

    Thanks Ismael,

    In the meantime I found a work around that involved adding the code to the 1/3 grid row element using Ad Zone code and I applied a variable styling to the tablet viewport option. Seems to have done the trick – the ads are smaller but they’re not cut off so that’s a good thing.

    To improve this view further is it possible to set the tablet padding to less than the desktop padding (which I think is 30px)?

    Cheers,
    Marsha

    #633438

    Hey!

    Yes, it should be possible. Apply a custom css class attribute to the cell (http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/) then modify the padding in the Quick CSS field.

    /* Tablet Portrait size to standard 960 (devices and browsers) */
    	@media only screen and (min-width: 768px) and (max-width: 989px) {
    .your-custom-css-class {
        padding: 10px !important;
    }
    }

    Replace the “.your-custom-css-clas” with the name of your own custom css class attribute.

    Regards,
    Ismael

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