Embedded Issuu catalog not centered

  • Unknown's avatar
    annsun86 · Member ·

    I cant seem to center the embedded issuu catalog in my project, the size ends up bigger than the code/url i get from the issuu site aswell.

    I have asked Issuu for support, but they keep telling me i am adding the link wrong.

    It is embeded through add media, and url.

    Can anyone help?

    http://annelinesundby.com/portfolio/highlights-summer-2015

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    mishrashutosh · Member ·

    Hi,

    From what I can figure, the issuu code has hardcoded width value (1100px) which is overriding the theme’s values. You will need to add

    max-width: 100%;

    to the embed code for the catalog to display properly.

    If you could provide the URL you used from issuu, I may be able to help further.

  • Unknown's avatar
    annsun86 · Member ·

    ok, thanks for the response!

    it comes up like this after i add the link through add media, in edit project.

    [embed]http://issuu.com/bergansofnorway/docs/bergans_ss15_catalog_eng?e=0/11960624[/embed]

    This is the issuu page i get the link from:

  • Unknown's avatar
    mishrashutosh · Member ·

    In the WordPress editor, switch to the Text (or HTML) editor, and replace the embed code with this:

    <div style="max-width:100%">
[embed]http://issuu.com/bergansofnorway/docs/bergans_ss15_catalog_eng?e=0/11960624[/embed]
</div>

    I am not super good at CSS, but please give it a try and let me know if it works.

    max-width restricts the maximum width of the issuu catalog to that of the post width.

  • Unknown's avatar
    annsun86 · Member ·

    Yeah, i replaced it. But still not centered :( What about using a regular code like this in the HTML editor

    <div data-configid=”0/11960624″ style=”width:525px; height:339px;” class=”issuuembed”></div><script type=”text/javascript” src=”//e.issuu.com/embed.js” async=”true”></script>

    and add a max-width value?

    or a iframe version of code?

    <iframe width=”525″ height=”339″ src=”//e.issuu.com/embed.html#0/11960624″ frameborder=”0″ allowfullscreen></iframe>

  • kathrynwp · Staff ·

    Your Issuu cover image looks centered, did you get this sorted?

    What about using a regular code like this in the HTML editor

    It’s not possible to add JavaScript or iframes on WordPress.com, so the embed is the way to go here.

  • Unknown's avatar
    mishrashutosh · Member ·

    Kathryn, the embed looks pretty bad on a low res screen, like mine. This is how it should look:
    http://i.imgur.com/r4waO3j.png

    This is how it currently looks, with a horizontal scrollbar and all: http://i.imgur.com/ldrjdJj.png

    This being a Flash object, I am not sure how to force it to stay within the post width.

  • kathrynwp · Staff ·

    Ah, I see what you mean better now – I originally thought you were trying to get the embed centered within the grey rectangle.

    It doesn’t look like the Issuu object is responsive by default, so it doesn’t resize automatically for smaller screens. I did a bit of research and found this custom CSS that you can try – it seems to work quite well in my browser inspector until the screen gets very small, but since Flash does not run on most phones the point is a bit moot. :)

    .issuuembed.issuu-isrendered {
  width: 100% !important;
}

    Let me know how it goes after placing this CSS in your Customizer’s CSS panel.

  • Unknown's avatar
    annsun86 · Member ·

    Yes it worked! Thanks so much guys :D

  • kathrynwp · Staff ·

    Great, glad that did the trick!

  • The topic ‘Embedded Issuu catalog not centered’ is closed to new replies.