I'm getting "Not Mobile Friendly" error in Google search console of my webmaster tools. These errors are only for all single posts/pages. The homepage is still mobile friendly.
Check it:
https://www.google.com/webmasters/tools/mobile-friendly/?url=https%3A%2F%2Ftechreviewpro.com%2Ffree-online-photo-converters-9723%2F
I think this is because of some customization fault because the single pages in mobile devices don't fit to screen; instead, they float left or right.
Possible solution to the below problems
Links too close together - Increase the hit area of the links and add padding
Content wider than screen - use media queries, set content width to 100% and make sure content doesn't have text-overflow: wrap; applied on text.
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 }}
I have been trying to learn how to design web pages using responsive web design. I have come across an interesting example that I do not understand:
http://www.sixty-nine.us/collections/general/
On this page on a desktop you will see gifs but when you shrink the browser enough you will see still images.
I thought this type of change in content was not possible with responsive web design because it can only control the style not the content. I was hoping someone could tell me what is actually happening here, and if my conception of the limitations of responsive web design to not change content is correct.
Any responsive design is based on #media CSS queries where you can choose which style should be applied on elements on which screen sizes (CSS approach)
Or using some JS code which monitors window width and shows/hides some elements or does what it should do. (JS approach)
They are actually looping videos and not gif. If the resolution is low the video is hidden, and jpg shown using display:none. Check the end of their stylesheet: http://cdn.shopify.com/s/files/1/0515/5693/t/2/assets/legend.css?7907595077267123575
They are using #media to control how it is shown on different devices. Read more about #media here:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Responsive web design is a wide variety of information on the Internet ,and the information is abstract,philosophical,and anecdotal.
Most of the time, in responsive mode we hide or display content.
For example: slideshow can be hidden in 480px less screens. for that we display a banner still banner with large text to explain the section / content.
So content can be changed with CSS. But the content does not change or added. Normally content is already loaded. But the showing will be changed with the responsiveness.
PS. your link does not work.
I am building a site for my friend, He specified a bug for me. He said,"When I Zoom in/out the browser, the Website layout “breaks apart” but it is working fine in 100% Browser Zoom."
Please let me know the Standard for web development for Browser Zooming
In CSS there is something called "em". Different from pixels, they adjust themselves to screen settings. With most CSS elements, zooms should not be a problem, but if you are really having trouble, I would recommend using em as units
usually I don't consider zooming but if you want a good website that shows ok with different screen resolutions like in mobile browsers or tablet you'd better use responsive style sheets.
you do not need to write it by your own. you can use style sheets like twitter bootstrap which already supports responsive web pages
you can download it from here enter link description here
The webpage should be responsive enough like to work for "smaller screens" that is more or less how it will work for your CSS when they zoom in.
Make sure you have min-width or min-height set to your body or general container so, when it gets to this minimums it just stais as it looks.
For example, for the SO webpage, you have the div with id "content" inside the general div.container that has a width of 980px, so if you zoom in a lot it just shows the bottom scrollbar.
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.