Coblock are great: how to customize a image in size?

  • Resolved apolloman

    (@apolloman)


    3 years, 10 months ago

    hello dear developer dear coblock-team,

    ?
    i hope youre well – and all is going good ?– even in these days where allmost everything is special. I hope that your hometown is dealing well with the pandemic things.

    i love the coblock very very much – they are so great!

    ?
    i just have started to work on a site: ?i have integrated (for some special purposes) a dashboard of the JHU? ( John Hopkins University) to a twenty-twenty-theme. i did it: it works very well: see https://www.f-s-j.de/??note, this is a very fresh installed WP with the theme twenty-twenty.

    see the embedded block:
    what i want to achieve: lower the height and the width

    i allready have played with the values of the code:

    a. width: 100%; height: 100%; – i changed those values to 50 % – without any effect: this changed nothing.
    b. iframe width=”500″ height=”400 – i changed those values to other values – without any effect:

    how to achive a smaller embedded block !? look forward to hear from you+

    see the embedded code:

    <style>.embed-container {position: relative; padding-bottom: 80%; height: 0; max-width: 100%;} .embed-container iframe, .embed-container object, .embed-container iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;} small{position: absolute; z-index: 40; bottom: 0; margin-bottom: -15px;}</style><div class=”embed-container”><iframe width=”500″ height=”400″ frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ title=”COVID-19″ src=”https://www.arcgis.com/apps/opsdashboard/index.html#/bda7594740fd40299423467b48e9ecf6″></iframe></div&gt;

    see where i have gathered the code to embed: COVID-19 Data Repository by the Center for Systems Science and Engineering (CSSE) at Johns Hopkins University: https://github.com/CSSEGISandData/COVID-19

    ?

    – what would you do to lower the size of the included image!?

    btw: the theme that i run is a standard-theme twenty-twenty – with a coblock that is running …

    i love to hear from you?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter apolloman

    (@apolloman)

    hi there

    sorry: the correct url to the page looks like so: https://www.f-s-j.de

    what is aimed: i want to resize the integration of the dashboard of JHU
    i want to resize it – and have a smaller integration –

    love to hear from you

    ps – keep up the great project – coblock – great and overwhelming gutenberg-stuff. i love it and i am pretty sure that this great plugin is running in many many countries all over the globe. Overwhelming

    Plugin Support gdandrija

    (@gdandrija)

    Hi @apolloman,

    Thank you so much for your support for our CoBlocks plugin, it means a lot ??

    While iframe embed code is not directly part of the CoBlocks plugin, rather a custom code entered into Gutenberg block editor, I will give you a few pointers so you could setup what you need.

    You can use the CSS snippet below to reduce the size of this section:

    
.home .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    max-width: 70%;
}

    Feel free to adjust the value of max-width until you are happy with the results.

    Styling an iframe can be a bit tricky since the code is not loaded from your website, fortunately, I can see that iframe contents are responsive.

    I hope this helps, have a nice day,
    Andrija

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Coblock are great: how to customize a image in size?’ is closed to new replies.

Tags