I’m trying to figure out how to make Giphy graphics responsive.
They don’t reduce in proportion with the rest of the page content when in mobile mode.
I don’t have this problem with stills, even though I specify their dimensions in the HTML code.
Any thoughts or suggestions would be greatly appreciated.
Hi,
The theme doesn’t have style added for Giphy graphics however I’ve tested this using an embed iframe for this gif: http://giphy.com/gifs/graphics-pD29ZaiThhXsA
You can try to use this custom css to make them appear well on mobile screens: http://screencast.com/t/o6eGth099xT
@media (max-width: 767px) {
.giphy-embed {
width: 100%;
}
}
Add it in theme panel > custom css section.
Provide your site’s URL with an example so we can inspect it if it doesn’t work for you.
Thanks
Thank you for your prompt response.
I understand your suggestion, but I don’t see the Custom CSS section for articles. My content format uses Giphys in most of them.
Here’s an example: http://betterlifefocus.com/if-you-really-truly-want-to-succeed-buy-into-the-yoda-code/
You’ll see three Giphys in the article.
I’m still building this site and am working to get all the finer details inured before I start promoting it in earnest. Most of my visitors will hit it via mobile, so resolving this issue in a practical manner is a top priority for me.
I appreciate your continued assistance.
Hi,
Try the css code like this: http://screencast.com/t/MFwT9HyhrQ and add it in theme’s panel > custom css section, like this: http://screencast.com/t/pjjltiY4jzC it should solve your problem.
Thanks
What you’ve described makes sense …
However, I added it at the bottom of the existing custom code for my site, and I’m not seeing any change.
Your continued assistance will be most welcome.
Here’s what the entire Custom CSS for my site looks like now:
/*************************************
H O M E P A G E
***********************************/
#td_parallax_header_6 > header > div.meta-info > div.td-post-views,
#td_parallax_header_6 > header > div.meta-info > div.td-post-comments,
header > div.meta-info > div.td-post-views,
header > div.meta-info > div.td-post-comments
{display:none;}
#td-outer-wrap > div.td-transition-content-and-menu > div.td-header-wrap.td-header-container > div.td-header-menu-wrap > div
{width: 100%;}
#td-outer-wrap > div.td-transition-content-and-menu.td-content-wrap > div.td-header-wrap.td-header-container.td-header-style-7 > div.td-header-row.td-header-header > div > a > img
{width:1021px;}
body div#td-outer-wrap div.td-header-wrap.td-header-container.td-header-style-7 div.td-header-row.td-header-top-menu div.td-header-sp-top-menu ul.top-header-menu.td_ul_login li.menu-item
{display: none;}
body.single div#td-outer-wrap div article div.td-container div.td-post-sharing,
div.td-post-sharing.td-post-sharing-top,
#td-outer-wrap div.td-module-comments
{display:none;}
#td-outer-wrap > div.td-transition-content-and-menu.td-content-wrap > div div > div div:nth-child(5) > div > div > div.td-visible-desktop > iframe
{
border-top: 5px solid #000;
border-left: 5px solid #000;
border-right: 5px solid #000;
}
#td-outer-wrap div.td-a-rec.td-a-rec-id-sidebar div.td-visible-desktop a img
{
border-bottom:5px solid #000;
border-left: 5px solid #000;
border-right: 5px solid #000;
position:relative;
bottom: 5px;
}
#td-outer-wrap > div.td-transition-content-and-menu.td-content-wrap > div.td-footer-container.td-container > div > div aside.widget.widget_tag_cloud > div.block-title > span,
.td-footer-container .block-title > a, .td-footer-container .block-title > span,
body div#td-outer-wrap div.td-transition-content-and-menu.td-content-wrap div.td-footer-container.td-container div.td-pb-row div aside.widget.widget_text div.block-title span,
div#td-outer-wrap div.td-transition-content-and-menu.td-content-wrap div.td-container.td-pb-article-list div.td-container-border div.td-pb-row div.td-main-content div.td-ss-main-content h4.block-title span,
div#td-outer-wrap div.td-transition-content-and-menu.td-content-wrap div.td-container.td-pb-article-list div.td-container-border div.td-pb-row div.td-main-sidebar div.td-ss-main-sidebar aside.widget.widget_archive div.block-title span,
div#td-outer-wrap div.wpb_wrapper h2.wpb_heading.wpb_video_heading,
body.page div#td-outer-wrap div div.td-container div.td-container-border div.td-main-sidebar div.td-ss-main-sidebar aside.widget.widget_text div.block-title span
aside .block-title > a, aside .block-title > span
{
color: #faf992 !important;
background-color: #ee0bcd !important;
}
#menu-main-navigation-1 li.menu-item > ul > li.menu-item a
{font-size:1rem; color: #fff;}
#menu-main-navigation-1 li.menu-item > ul > li.menu-item
{background: #ff0099; }
#td_parallax_header_6 > header > div.meta-info > div.td-post-views, #td_parallax_header_6 > header > div.meta-info > div.td-post-comments, header > div.meta-info > div.td-post-views, header > div.meta-info > div.td-post-comments {
display: none;
}
#td-outer-wrap > div.td-transition-content-and-menu > div.td-header-wrap.td-header-container > div.td-header-menu-wrap > div {
width: 100%;
}
#td-outer-wrap > div.td-transition-content-and-menu.td-content-wrap > div.td-header-wrap.td-header-container.td-header-style-7 > div.td-header-row.td-header-header > div > a > img {
width: 1021px;
}
body div#td-outer-wrap div.td-header-wrap.td-header-container.td-header-style-7 div.td-header-row.td-header-top-menu div.td-header-sp-top-menu ul.top-header-menu.td_ul_login li.menu-item {
display: none;
}
body.single div#td-outer-wrap div article div.td-container div.td-post-sharing, div.td-post-sharing.td-post-sharing-top, #td-outer-wrap div.td-module-comments {
display: none;
}
#td-outer-wrap > div.td-transition-content-and-menu.td-content-wrap > div div > div div:nth-child(5) > div > div > div.td-visible-desktop > iframe {
border-left: 5px solid #000;
border-right: 5px solid #000;
border-top: 5px solid #000;
}
#td-outer-wrap div.td-a-rec.td-a-rec-id-sidebar div.td-visible-desktop a img {
border-bottom: 5px solid #000;
border-left: 5px solid #000;
border-right: 5px solid #000;
bottom: 5px;
position: relative;
}
#td-outer-wrap > div.td-transition-content-and-menu.td-content-wrap > div.td-footer-container.td-container > div > div aside.widget.widget_tag_cloud > div.block-title > span, .td-footer-container .block-title > a, .td-footer-container .block-title > span, body div#td-outer-wrap div.td-transition-content-and-menu.td-content-wrap div.td-footer-container.td-container div.td-pb-row div aside.widget.widget_text div.block-title span, div#td-outer-wrap div.td-transition-content-and-menu.td-content-wrap div.td-container.td-pb-article-list div.td-container-border div.td-pb-row div.td-main-content div.td-ss-main-content h4.block-title span, div#td-outer-wrap div.td-transition-content-and-menu.td-content-wrap div.td-container.td-pb-article-list div.td-container-border div.td-pb-row div.td-main-sidebar div.td-ss-main-sidebar aside.widget.widget_archive div.block-title span, div#td-outer-wrap div.wpb_wrapper h2.wpb_heading.wpb_video_heading, body.page div#td-outer-wrap div div.td-container div.td-container-border div.td-main-sidebar div.td-ss-main-sidebar aside.widget.widget_text div.block-title span aside .block-title > a, aside .block-title > span {
background-color: #ee0bcd !important;
color: #faf992 !important;
}
#menu-main-navigation-1 li.menu-item > ul > li.menu-item a {
color: #fff;
font-size: 1rem;
}
#menu-main-navigation-1 li.menu-item > ul > li.menu-item {
background: #ff0099 none repeat scroll 0 0;
}
#td_parallax_header_6 > header > div.meta-info > div.td-post-views, #td_parallax_header_6 > header > div.meta-info > div.td-post-comments, header > div.meta-info > div.td-post-views, header > div.meta-info > div.td-post-comments {
display: none;
}
#td-outer-wrap > div.td-transition-content-and-menu > div.td-header-wrap.td-header-container > div.td-header-menu-wrap > div {
width: 100%;
}
#td-outer-wrap > div.td-transition-content-and-menu.td-content-wrap > div.td-header-wrap.td-header-container.td-header-style-7 > div.td-header-row.td-header-header > div > a > img {
width: 1021px;
}
body div#td-outer-wrap div.td-header-wrap.td-header-container.td-header-style-7 div.td-header-row.td-header-top-menu div.td-header-sp-top-menu ul.top-header-menu.td_ul_login li.menu-item {
display: none;
}
body.single div#td-outer-wrap div article div.td-container div.td-post-sharing, div.td-post-sharing.td-post-sharing-top, #td-outer-wrap div.td-module-comments {
display: none;
}
#td-outer-wrap > div.td-transition-content-and-menu.td-content-wrap > div div > div div:nth-child(5) > div > div > div.td-visible-desktop > iframe {
border-left: 5px solid #000;
border-right: 5px solid #000;
border-top: 5px solid #000;
}
#td-outer-wrap div.td-a-rec.td-a-rec-id-sidebar div.td-visible-desktop a img {
border-bottom: 5px solid #000;
border-left: 5px solid #000;
border-right: 5px solid #000;
bottom: 5px;
position: relative;
}
.td-trending-now-title.block-title,
.td-related-title .td-cur-simple-item
{
background-color: #ee0bcd !important;
color: #faf992 !important
}
@media (max-width: 645px) {
.gphy-embed {
width: 100% !important;
}
}
Hi,
You have mistyped the giphy iframe css selector: http://screencast.com/t/z9yywi6eAM that’s why it doesn’t work.
Use it like this: http://screencast.com/t/LJPD44ZO and I recommend you to set the media query to max width 1023px because the same issue is preset on tablets portrait view also: http://screencast.com/t/Ssail3A5ip
@media (max-width: 1023px) {
.giphy-embed {
width: 100% !important;
}
}
Thanks for the message!
Thank you for identifying a careless error on my part …
I’ve inserted the code properly, and the Giphys now re-size.
I noticed your code for tablets began with // instead of @ so I inserted another version of the code separately, ie- //media (max-width: 1023px) { .giphy-embed { width: 100% !important; } }
I don’t have a tablet here at the moment. Was that something I needed to do
I very much appreciate the assistance you’re providing.
Hi VicVik,
Those two slashes were my mistake, using @ is the right way, I see you have it right now: http://screencast.com/t/O7qAoByVE
Thanks for the message!
