I have modified the twentytwelve theme for its responsiveness on a website. I like it, but my client would also like the OPTION on a mobile to view the website in full width.
Is that possible? Maybe with a plugin?
Maybe somehow I can put a link on the mobile website which removes the "viewport" meta tag so it'll be viewed in full screen?
To create a version of the website that is NOT responsive you can go into TwentyTwelve's style.css file and edit the media queries.
Scroll down to the media queries section and edit the "min-width" property, which is by default set to 600px.
Basically that query is saying that for every browser width larger than 600px, the full desktop version of the site will be shown.
If you change the min-width to be 1px, for example, the desktop version will always be shown.
Related
I use the Stripe checkout plugin on my wordpress site in Woocommerce. Despite some problems with alignment, everything works fine when filling the payment fields when the screen width is greater than a certain amount of pixels (I don't know exactly how much, but above 800px it works - See the first image). The problem happens when I try to complete the purchase on a screen through the browser on a mobile device or even on the desktop simulating a mobile screen in DevTools (Second image).
[Image 1 - Checkout on desktop deviceImage 2 - Checkout on mobile device Chrome Navigator](https://i.stack.imgur.com/wWS3F.png)
At first I suspected that the problem was related to the css style sheet. I managed to change the size of the div using the #stripe-card-element selectors. The result was only that the blank field get bigger. When inspecting the element when everything is correct, the iframe is loaded inside the #stripe-card-element div, but after decreasing the screen, the iframe is no longer loaded, leaving the code snippet like this.
<div id="stripe-card-element" class="wc-stripe-elements-field">
<!-- a Stripe Element will be inserted here. -->
</div>
I've tried updating the plugins I use and looking for a conflict with another plugin, but nothing worked
I picked Kadence theme for my blog and so far i'm loving it but currently i'm facing a problem when editing the single posts page.
I want to have "boxed" content style on desktop which looks better than full width in several smaller screen computers and full width content style on mobile only.
The theme's default editor only gives me the option to switch to either one, it's not possible to choose a different setting for each device.
When browsing on mobile with the "boxed" content style there's a huge margin which makes the content appear too narrow, this is fixed when setting content style to "full width". But with this option selected the desktop version's content is way too wide for some smaller computer screens.
I've tried using "additional css" in the customizing options present in my theme and put some code I found after a quick browsing session but so far nothing worked as intended.
Any sort of help with this will be appreciated.
Thanks in advance.
you can use media query css with single post type class.
#media only screen and (max-width: 767px) { .single-post target-class { //CSS code }}
The website is https://www.alisamesseroffphotography.com/ and the mobile site margins look awful. We use PhoPhoto in Wordpress, and cannot figure out how to add some margins.
Thanks so much!
What mobile site?
It's literally the same site.
You need to look at ditching or changing the theme.
As the other answer says, look at media queries : using a media query you can change how the page displays depending on the screen size it is viewed on. For instance, you could use this to add padding to the article-content class to force there to be white space around all the content on the page (but not the navigation or header image) which I think would solve your problem.
I think you should probably change the theme, something based on bootstrap would do a lot of the styling on a mobile device for you, and would make the navigation work better.
Just checked my site http://www.traumbad-muenchen.de in this tool http://quirktools.com/screenfly/ using the tablet setting Apple IPad 768x1024.
For this size the navigation menu seems to be too big, cause it is displayed in two lines. Thats why I would like to set the responsive breakpoint to 800px width so that instead of the navigation menu the navigation for mobile version is displayed (≡ menu symbol on the top, right corner).
What do I have to change in the responsive.css to get this done?
Thx for your tips.
BR
Heidi
There's nothing to change in responsive.css but instead you will be modifying the main style sheet # style.css
Simply replace all the instances of 719px to 800px
Now replace all the instances of 720px with 801px
You can copy paste the whole style sheet in a notepad ( or any similar tool ) and then start replacing just the 719px part and 720px and you should be good.
I am using a modified version of the Quintus Theme in a self-hosted WordPress site. The site appears and works great on all browsers that I have tested, a windows tablet, and a windows phone. When I view the site on an iPad running the latest iOS version, the site is being squished to what I would assume is between 700-800px wide... all except for my custom header and slider. The blog title, menu and everything contained within the #page is not showing full width. I have beat my head against a wall trying to locate this needle in the haystack to find what could be causing this to display short of the width. I even tried some iPad emulators, however all those display the site perfectly. The actual iPad is not. I am not sure how to inspect the elements on an iPad since there are not any options on an iPad broswer to do so. Can someone please help me?
Blog... http://blog.modafabrics.com
Using the chrome emulator, i can't see any responsive CSS being used.
Your big slider area in the middle is set to a width of 1000px, whereas a iPad's resolution is only around 1024 x 768px. When in portrait you will be missing almost a quarter of the screen size.
The best way around it would be to start using percentages once you hit 1024px and to start making it responsive so it works on all devices, mobiles included.
Have a read on the MDN about media queries which are what are used in responsive CSS.
Link: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
EDIT
Ill see if i can get you started on making things a bit better.
These are all changes needed within your css which need to be applied within the media query for tablets
#page {
overflow-x: hidden; // stops the page being slid to right
}
#primary {
float: none; // removes the float style from the element (things can go above/under it otherwise)
}
#content {
margin: 0; // makes it full width
}
You will then need to decide what your going to do with the sidebar e.g. hide it or drop it below the content.
That should get you started on it. The best way to continue would be to use the chrome inspect element tool, you can then dig into each layer of the template and see why different things aren't re-sizing.