I'm working on a website that is responsive for mobile. We want to be able to have a "full site" button when it's viewed on a mobile device so users can see the normal website without responsive styling.
I'm thinking on click of the "full site" button I can remove the media queries stylesheet. But that doesn't overwrite the viewport setting that I have:
And even if I could change the site at the click of a button, what happens when the user navigates to a new page?
Any ideas for the best way to handle this? Is it even possible? Thanks!
http://sunniebrook.com
There's this small blog post on css-tricks.com which I find pretty cool:
http://css-tricks.com/user-opt-out-responsive-design/
Which led me to this other blog post:
http://creativeandcode.com/responsive-view-full-site/
(Just put your wanted width in the meta viewport tag ;-) ).
Related
My situation is the following:
I have a WordPress eCommerce website with several products on it. On the product pages, obiously there are pictures of the product. When you select the picture, it opens a pop-up screen with an enlarged version of the product picture.
Recently I have noticed that, when people open the product image pop-up on a mobile device, they start scrolling. I assume this is because they expect the pop-up to close when scrolling.
All these functions (product page, product image pop-up) are created by WordPress plugin WooCommerce. The layout and style are created by my selected WordPress Theme. This means I have access to some funtions but changing things like JavaScript is not an easy thing to do.
So my question is:
Is there a way to add functionality to close the product image pop-up when scrolling on a mobile device?
Thanks in advance for any help, I would really appreciate it!
Yes it can be close easily.
You can do from your page builder option Like Elementor, WPBakery Page Builder or anything that are you use.
Secondly you can close it using JavaScript.
You can do from your Theme Option.
Thank you Hope it will Help you
It's hard to fit nicely a large table with lots of info (eg price table, size chart etc) on a product web page. But eBay has it figured out. Anyone knows how they do this responsive pop up ?
eBay size chart:
On a laptop, it opens as a popup window. It's smaller than the layer below. To return to the product page, there's the classic x button in the upper right corner.
On mobile, it appears to be a regular page, but without the usual header or menu. Just a "Back" button at the top of the page and a table with the size info.
My question: I'm looking for a way to achieve this nice responsive (pop-up turns into a regular page on mobile) effect for my Wordpress website.
For the responsive pop-up view, you should try WP Post Popup WordPress plugin.
Maybe you get what you want in mobile view.
Here is the standard iframe code they give for embedding.
Is there anything I can add to this that will change the target for the "View on Instagram" button that appears when you mouse over the word Instagram in the iframe? I'd prefer it opened a new tab or new window.
Here is the article where I currently have it embedded.
http://www.pdga.com/when-it-rains-it-pours
I haven't worked with embedding instagram media before, but this seems to be a common gripe (understandably). See this FAQ post on a wordpress plugin which I assume is similar to what you're using
That link is within the Instagram embed iframe, you cannot change it, if you don't want people to click and go out of your page, you can hide the top section of iframe like this: http://blog.initlabs.com/post/59132920494/how-to-position-a-section-of-iframe-in-a-div
I am customizing this Tumblr for someone who asked that I move the menu items above the header, including social buttons. I solved this in the Effector theme by selecting "Pages in top bar" (which moved the Music, Gallery, and Contact buttons on the top left) and then opted to forego the social widgets in the theme and instead linked images of select social buttons to the musician's social sites. It looks exactly how I want it to look on a computer, but this top "menu" disappears in mobile view. I'm not quite sure what I need to input in CSS, or maybe that's not the route to go. Tried various things for a few days to no avail. Anyone know of a solution?
Site: sinclaireoo.com
Have you tried going to customize > advanced options and click "Use optimized mobile layout"?
Is there a solution to change the add Media popup in posts/page Wordpress admin ?
My dream is to integrate the popup directly in a metabox. The user shouldn't open the popup to manage his media files. And sometimes hide the library and From URL tabs, not always useful...
I'm looking to better manage a product page (for ecommercial website..) and its images.
Just a question :) And maybe a suggestion.
What do you think about that?
You can manipulate that screen in a couple of ways.
Using the action hook admin_head-media-upload-popup, as seen in How to Add a Custom Colum on Thickbox Media Gallery Tab?.
Or using the filter media_upload_tabs: Remove tabs from media uploader for a CPT.
Other solutions/examples and possible hooks can be found with this search query: https://wordpress.stackexchange.com/search?q=media-upload-popup
Take a look at the plugin Image Pro, which seems to meet the requirements.
Upload, resize, add, change images instantly. Manage your media collection with ease and use it for any post or page. A new way of managing content!
And analyzing the code of the plugin Faster Image Insert can reveal some interesting techniques.
Fully integrates media manager into editing interface, avoid reloading thickbox pop-up, with enhanced features like multi-insert & mass-editing.