One of my website page is not being responsive in mobile - plugins

hope you are all ok .
I am getting a problem with my website https://upfoto.nl. All content of my website is responsive and functioning ok except - https://upfoto.nl/contestants/test-60/ - this page. it's responsive in tablet version but not in mobile, in mobile, it's getting off-centered. Please help me to fix it

I just took a quick look at it, looks like you have put width: 100%; on your class wpvc_contestant_values when going in mobile. That makes the content as big as the screen. Removing that resolves the issue.

Related

Responsive Design - Site Showing Differently on iPhone versus Smaller Browser

I've added some media queries to my site here, which show correctly when I minimize the browser's window to the smallest size. Though unfortunately, when I navigate to one of the internal pages, the original design shows on the iPhone. When testing it in my browser, the site works properly regardless of what page I'm on.
Note: To test, minimize your browser to the smallest width which will show the "mobile site" that they wanted.
I'm completely stumped here. Could someone please point me in the direction as to why the iPhone seems to be loading old CSS while the browser itself is loading the current CSS?
Thanks!
Make sure you include a viewport meta tag like this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Could someone please point me in the direction as to why the iPhone seems to be loading old CSS while the browser itself is loading the current CSS?
You probably answer your own question. This definitely seems like a caching issue because I see the same site on both my mobile and desktop browser.
Try clearing your mobile browser's cache. If you use Safari, go to Settings > Safari > Clear cookies and data. If you use Chrome, or any other 3rd party browser, you can usually clear local files under the in-app settings page.

Bigger size Like-Button ?

I'm working on the mobile version of my company's web site. I redesigned everything using CSS mediaqueries and serverside PHP to perfectly fit in the mobile viewport.
One big problem is facebook's like button.
It is unbelievable small and nearly impossible to click without zooming in. Is there someone with a similar problem? How did you solve this task?
Thanks in advance!

Size of like-button changed on mobile devices

I've been displaying a like-button on my mobile websites for quite some time now using an iframe. For a few weeks now the size of the button has increased on all mobile devices, but not on for example the iPad or desktop browsers.
Does anyone know why this is happening or what I can do to show the old size, because that fitted perfectly. Now it's too big for it's container.
Thanks in advance,
Cyril
Seems like a bug you should log with Facebook. Log it at: https://developers.facebook.com/bugs

How to make web site that is compatible to mobile(Blackberry,Android,iPhone) screen sizes?

Hi I am developing a site for desktop.The site renders the contents for desktop size.But when I see it in mobile the content is not properly rendered.
How can I make a site that fits all mobile screen sizes say Blackberry,Android,iPhone, etc. Can anybody mention any articles. I know only HTML. Thanks in advance.
I remember looking into myself a while ago and finding this video tutorial on net-tuts+ to be a good starting point
It is hard to make a single site that looks good on both mobile and desktop. Resolution is not the only problem, the very way the user interacts with you site changes on a mobile device. That said, the typical thing to do is to have a mobile style sheet which is loaded for mobile, and a desktop sheet for desktop. You might even go so far as to limit some of your content on mobile to make the page lighter.
I found http://mobiforge.com to be a good source of info.

Facebook like button doesn't work in certain browsers or on certain OS

So, I use the same fb-like plugin (fbml based one) code on 5 different pages on the website. The only difference is the different data in meta description and type of content. All pages were checked through the fb linter and it says everything is okay. All the buttons work alright in Chrome under Mac OS, but in Firefox, Opera (Mac & PC) and Chrome on PC (Windows) 3 of these buttons do not appear and none of them work in Safari on Mac. I can see that fb scripts are working some way, you can see the code with built-in developer tools in Opera or Chrome, and the element does occupy the space, but the button is not shown...
I've tested all the code in the pages including html, js and css line by line and it looks like it doesn't affect the fb-likes. I've also take the code from the page with the problem fb-like and make the new page with the only difference in fb-like href property - and it works. But when I change the href to the address of the page where like button didn't work - it stops working. So as I understand the problem is not on the website side, but since the fb-linter doesn't show any errors the problem is not on fb side either. But where is it then?
I've contacted the fb developers team, but I guess it may take them extremely long to answer , so I'd like to know if sombody had such a problem before. Any opinions or thoughts are appreciated!
Here's the website.
Thanks in advance everybody(:
~