[jasiaworldParticipant]

Hi, My twitter feed which I embedded in my header widget looks fabulous on my website but not on my iphone. Is there any way to fix this? Make the widget more responsive?

Thank you.

J-ASIA

wwww.jasiaworld.com

[Rue NelModerator]

Hello There,

Thanks for writing in! Upon checking your page, it turns out that you have inserted an invalid Twitter code. Please go to your widgets area and check the code you have added. Please use this instead:

<a class="twitter-timeline" href="https://twitter.com/JASIAWORLD" data-widget-id="684384949978443776">Tweets by @JASIAWORLD</a> 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Please let us know if this works out for you. Thank you.

[jasiaworldParticipant]

Hi, Thank you, I switched out the code but it’s still not responsive. I placed it in my header widget box. I also tried placing it in a text box but the same thing happened…

[ThaiModerator]

Hi There,

Try adding the following CSS under Customize > Custom > CSS:

iframe#twitter-widget-1 *,
iframe#twitter-widget-2 * {
    max-width: 100% !important;
}

Let us know how it goes!

[jasiaworldParticipant]

Hi again, I put the CSS code in the Customize> Custom> CSS box like you said but it’s still not responsive…

[JadeModerator]

Hi there,

Please add this code as well:

@media (max-width: 480px) {
    #twitter-widget-0 {
        width: 100% !important;  
    }
}

Hope this helps.

[jasiaworldParticipant]

Hi, I added the code you gave me as well to the Customize> Custom> CSS box but it’s still not responsive.

[FriechModerator]

Hi There,

It is responsive on my end. Would you mind clearing your phone’s browser cache or try with another phone.

Thanks!

[jasiaworldParticipant]

Hi, I looked up how to clear my iphone cache and I cleared it. (I went to settings, safari “Clear history” and “Clear Cookies and data.”) I also refreshed and it is still not being responsive on my end. I have an iphone 6. I did the same with my sister’s iphone 5s and had the same issue. mm… Do you think I should get a twitter plugin instead?

[jasiaworldParticipant]

Hi, just adding to my last correspondence. I think we might have a slight misunderstanding. I noticed I do now have two very responsive twitter feeds above my navigation bar where there is a hovering plus sign. However, that is not the twitter feed that I am referring to that is unresponsive. I am referring to the twitter feed that is below the 6 social media icons on my main homepage.

[FriechModerator]

Hi There,

Yes, sorry about that we are inspecting the one on the header widget area. But the twitter widget that is below the 6 social icons is also responsive on our end. Anyways can you update the code we provide above to this:

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
  	#twitter-widget-0 {
        width: 100% !important;  
    }
}

That code is more specific on iPhones, you can also adjust the 100% value if the widget is not fit on the container.

Thanks.

[jasiaworldParticipant]

Hi, I put the code in. It didn’t work so I tried adjusting the % value but that didn’t do anything. I cleared my cache every time I was experimenting.

[jasiaworldParticipant]

I have some code written in the custom CSS box to fix other issues that I resolved through reading your support conversations with other customers. I’m not code savvy so I don’t know if this is a silly question but do you think they might be conflicting?

My Custom CSS box has the following codes above the new one you just gave me for the twitter.:

.x-btn-navbar.collapsed {
color: #333; size: 30px;
}

@media (max-width: 767px){
.home #x-section-1 .x-column.x-sm.x-1-6 {
width: 50%;
float: left;
}
}

[JadeModerator]

Hi J-ASIA,

Would you mind giving us access to the admin section of your site so that we could check the current CSS code that’s in the Customizer as there might be code blocks that are not correctly closed that’s why the new code you have added is not taking effect. Please don’t forget to set your response as private.

Thank you.

[jasiaworldParticipant]

This reply has been marked as private.

[Author]

Posts