Hello,
I´ve been working on this TAGDIV framework and it is absolutely SUPERB to work with 🙂
Actually, I am trying to include a “Raw HTML” code on the front of my website, but it doesn´t look as pretty as I would like because as you can appreciate from the following image, the is a LOT of emptiness colored by yellow:
https://imgur.com/a/AUZWrZz
The current code I have is this one:
<div class=”td-all-devices”><iframe src=”https://public.flourish.studio/visualisation/1473891/embed?auto=1″ width=”1000″ height=”1000″ frameborder=”0″ scrolling=”no”></iframe></div>
However, besides that yellow nasty area, also the iframe doesn´t display so well on MOBILE devices:
https://imgur.com/a/k6vvroa
As it supposed to look like this good readable map on Mobile devices:
https://imgur.com/a/jMBoTg5
So please I would like to know what would be the proper code in order to have a nice view on a Destop as a well as any Mobile device, like this one:
https://www.rtve.es/noticias/20200327/mapa-mundial-del-coronavirus/1998143.shtml
Thank you very much and I really appreciate your help!
IVAN M.
Hello !
You can use the column text element in order to render shortcodes or use HTML codes. Simply copy the shortcode and insert it in the text area of the column text as you can see here: https://www.screencast.com/t/UEMEsVKog
Column text is an element from tagDiv Composer.
Thank you !
Hey Vlad,
thanks for the tip, but unfortunately I CANNOT ADD the “Column TEXT” element
because in the ADD green button options, it only appears the 2 options with the search keyword “Column”:
* “Column title”
* “Column content”
Am I missing something?
Plus, is this code correct in order to show in all devices? (mobile friendly & responsive site):
<div class=”td-all-devices”><iframe src=”https://public.flourish.studio/visualisation/1473891/embed?auto=1″ width=”1000″ height=”1000″ frameborder=”0″ scrolling=”no”></iframe></div>
Thank you!
Hi,
The problem is from your code -> https://i.imgur.com/deKUCVK.png please decrease the height like this -> https://i.imgur.com/bvkSk1R.png
<div class="td-all-devices"><iframe src="https://public.flourish.studio/visualisation/1473891/embed?auto=1" width="1000" height="700" frameborder="0"scrolling="no"></iframe></div>
Hope this will help you!
Thank you!
Hi Cain,
thank for your suggestion for changing the height=”700″
However, as good as it looks like in my Desktop machine,
seeing the result on the MOBILE version of this iFrame
still looks AWFUL 🙁
so it is NOT Mobile Friendly also because it doesn’t FIT to any responsive device…
So please help me with this CODE in order to get it right and Mobile-friendly as well (responsive)
Thank you!
IVAN.-
Hello Ivancho,
Please note that this iframe is a custom code that you want to use in our theme and it has an inline css (width=”1000″ height=”700″) that can not be overwrite by our theme, also this is not covered by the support theme, but to not say that we do not want to help, I can make a suggestion that can work, set the code in a column text in text area -> https://i.imgur.com/QwOforJ.png and use a custom css for mobile ->
.td-all-devices iframe
{
height: 400px;
}
The code must be set here -> https://i.imgur.com/BmcNuKP.png
Hope this will help you!
Thank you for your understanding!
