Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
Thread Tools Display Modes
Share |
  #1  
Old 01-24-2017, 02:38 AM
amskape amskape is offline
Junior Member
 
Join Date: 01-23-17
Posts: 2
iTrader: 0 / 0%
Thumbs down How to fix the responsive theme problem reported by google?

Dear Friends,
On using google mobile friendly test i got 2 errors as
1. Clickable elements too close together

2. Content wider than screen
I tried alot to fix this issue. But no result yet. My style.css file in wordpress theme is : kopy.io/4ZO1l and my web site url is insight.org.in.

Please advise how to change this css file attached..

Thanks

Anes
 
Reply With Quote

Advertisement

Advertisement

  #2  
Old 01-24-2017, 10:12 PM
HTMLBasicTutor's Avatar
HTMLBasicTutor HTMLBasicTutor is offline
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 26,700
iTrader: 5 / 100%
Quote:
Originally Posted by amskape View Post
1. Clickable elements too close together
This means the spacing around your links (or clickable items) is too small.
Quote:
Touch elements too close

This report shows the URLs for sites where touch elements, such as buttons and navigational links, are so close to each other that a mobile user cannot easily tap a desired element with their finger without also tapping a neighboring element. To fix these errors, make sure to correctly size and space buttons and navigational links to be suitable for your mobile visitors. Read more in Size Tap Targets Appropriately.
Mobile usability report - Google Search Console Help
Size Tap Targets Appropriately
Quote:
Originally Posted by amskape View Post
2. Content wider than screen
I tried alot to fix this issue. But no result yet.
Your theme uses fixed sizing. You need to use flexible sizing.
Responsive Web Design Basics
 
Reply With Quote
  #3  
Old 01-25-2017, 02:00 AM
amskape amskape is offline
Junior Member
 
Join Date: 01-23-17
Posts: 2
iTrader: 0 / 0%
Lightbulb

Dear HTMLBasicTutor,
I check my web site with removing my style.css . Still show that 2 problems, so what i do in that situation ? Please advise

Thanks

Anes

Dear Sir,
A basic tweak in style.css remove the problem "Touch elements too close"
that style is

Quote:
@media screen and (max-width: 480px) {
a:link {
font-size: 120%;
line-height: 50px;
padding-right: 0 !important;
display: block;
#background-color: yellow;
margin: 0 10px 10px 0;
}
}
Please advise how to fix "Content wider than screen" ..

Thanks

Anes

Dear Sir,
Actually I am using 960.css for HTML coding . My relevant code for 960 css is

Code:
body{min-width:960px; width: 100%}.container_12,.container_16{margin-left:auto;margin-right:auto;width:960px}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;margin-left:10px;margin-right:10px}.push_1,.pull_1,.push_2,.pull_2,.push_3,.pull_3,.push_4,.pull_4,.push_5,.pull_5,.push_6,.pull_6,.push_7,.pull_7,.push_8,.pull_8,.push_9,.pull_9,.push_10,.pull_10,.push_11,.pull_11,.push_12,.pull_12,.push_13,.pull_13,.push_14,.pull_14,.push_15,.pull_15{position:relative}.container_12 .grid_3,.container_16 .grid_4{width:220px}.container_12 .grid_6,.container_16 .grid_8{width:460px}.container_12 .grid_9,.container_16 .grid_12{width:700px}.container_12 .grid_12,.container_16 .grid_16{width:940px}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width:60px}.container_12 .grid_2{width:140px}.container_12 .grid_4{width:300px}.container_12 .grid_5{width:380px}.container_12 .grid_7{width:540px}.container_12 .grid_8{width:620px}.container_12 .grid_10{width:780px}.container_12 .grid_11{width:860px}.container_16 .grid_1{width:40px}.container_16 .grid_2{width:100px}.container_16 .grid_3{width:160px}.container_16 .grid_5{width:280px}.container_16 .grid_6{width:340px}.container_16 .grid_7{width:400px}.container_16 .grid_9{width:520px}.container_16 .grid_10{width:580px}.container_16 .grid_11{width:640px}.container_16 .grid_13{width:760px}.container_16 .grid_14{width:820px}.container_16 .grid_15{width:880px}.container_12 .prefix_3,.container_16 .prefix_4{padding-left:240px}.container_12 .prefix_6,.container_16 .prefix_8{padding-left:480px}.container_12 .prefix_9,.container_16 .prefix_12{padding-left:720px}.container_12 .prefix_1{padding-left:80px}.container_12 .prefix_2{padding-left:160px}.container_12 .prefix_4{padding-left:320px}.container_12 .prefix_5{padding-left:400px}.container_12 .prefix_7{padding-left:560px}.container_12 .prefix_8{padding-left:640px}.container_12 .prefix_10{padding-left:800px}.container_12 .prefix_11{padding-left:880px}.container_16 .prefix_1{padding-left:60px}.container_16 .prefix_2{padding-left:120px}.container_16 .prefix_3{padding-left:180px}.container_16 .prefix_5{padding-left:300px}.container_16 .prefix_6{padding-left:360px}.container_16 .prefix_7{padding-left:420px}.container_16 .prefix_9{padding-left:540px}.container_16 .prefix_10{padding-left:600px}.container_16 .prefix_11{padding-left:660px}.container_16 .prefix_13{padding-left:780px}.container_16 .prefix_14{padding-left:840px}.container_16 .prefix_15{padding-left:900px}.container_12 .suffix_3,.container_16 .suffix_4{padding-right:240px}.container_12 .suffix_6,.container_16 .suffix_8{padding-right:480px}.container_12 .suffix_9,.container_16 .suffix_12{padding-right:720px}.container_12 .suffix_1{padding-right:80px}.container_12 .suffix_2{padding-right:160px}.container_12 .suffix_4{padding-right:320px}.container_12 .suffix_5{padding-right:400px}.container_12 .suffix_7{padding-right:560px}.container_12 .suffix_8{padding-right:640px}.container_12 .suffix_10{padding-right:800px}.container_12 .suffix_11{padding-right:880px}.container_16 .suffix_1{padding-right:60px}.container_16 .suffix_2{padding-right:120px}.container_16 .suffix_3{padding-right:180px}.container_16 .suffix_5{padding-right:300px}.container_16 .suffix_6{padding-right:360px}.container_16 .suffix_7{padding-right:420px}.container_16 .suffix_9{padding-right:540px}.container_16 .suffix_10{padding-right:600px}.container_16 .suffix_11{padding-right:660px}.container_16 .suffix_13{padding-right:780px}.container_16 .suffix_14{padding-right:840px}.container_16 .suffix_15{padding-right:900px}.container_12 .push_3,.container_16 .push_4{left:240px}.container_12 .push_6,.container_16 .push_8{left:480px}.container_12 .push_9,.container_16 .push_12{left:720px}.container_12 .push_1{left:80px}.container_12 .push_2{left:160px}.container_12 .push_4{left:320px}.container_12 .push_5{left:400px}.container_12 .push_7{left:560px}.container_12 .push_8{left:640px}.container_12 .push_10{left:800px}.container_12 .push_11{left:880px}.container_16 .push_1{left:60px}.container_16 .push_2{left:120px}.container_16 .push_3{left:180px}.container_16 .push_5{left:300px}.container_16 .push_6{left:360px}.container_16 .push_7{left:420px}.container_16 .push_9{left:540px}.container_16 .push_10{left:600px}.container_16 .push_11{left:660px}.container_16 .push_13{left:780px}.container_16 .push_14{left:840px}.container_16 .push_15{left:900px}.container_12 .pull_3,.container_16 .pull_4{left:-240px}.container_12 .pull_6,.container_16 .pull_8{left:-480px}.container_12 .pull_9,.container_16 .pull_12{left:-720px}.container_12 .pull_1{left:-80px}.container_12 .pull_2{left:-160px}.container_12 .pull_4{left:-320px}.container_12 .pull_5{left:-400px}.container_12 .pull_7{left:-560px}.container_12 .pull_8{left:-640px}.container_12 .pull_10{left:-800px}.container_12 .pull_11{left:-880px}.container_16 .pull_1{left:-60px}.container_16 .pull_2{left:-120px}.container_16 .pull_3{left:-180px}.container_16 .pull_5{left:-300px}.container_16 .pull_6{left:-360px}.container_16 .pull_7{left:-420px}.container_16 .pull_9{left:-540px}.container_16 .pull_10{left:-600px}.container_16 .pull_11{left:-660px}.container_16 .pull_13{left:-780px}.container_16 .pull_14{left:-840px}.container_16 .pull_15{left:-900px}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:before,.clearfix:after{content:\0020;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both}.clearfix{zoom:1} /*****************/ /* MEDIA QUERIES */ /*****************/ /* Tablet Screen Sizes */ @media only screen and (min-width: 768px) and (max-width: 959px) { /* Resize the body */ body {min-width:767px;} /* Resize the row */ .row {width:767px;} /* Resize the columns */ .col_12 {width:748px;} .col_9 {width:492px;} .col_8 {width:556px;} .col_6 {width:364px;} .col_4 {width:172px;} .col_3 {width:236px;} } /* Mobile Landscape Screen Sizes */ @media only screen and (min-width: 480px) and (max-width: 767px) { /* Resize the body */ body {min-width:479px;} /* Resize the row */ .row {width:479px;} /* Resize the columns */ .col_12 {width:460px;} .col_9 {width:225px;} .col_8 {width:225px;} .col_6 {width:225px;} .col_4 {width:225px; margin-left:0px;} .col_3 {width:225px; margin-left:0px;} /* Fix the .last issue */ .last { margin-left:0; margin-right:10px; } } /* Mobile Portrate Screen Sizes */ @media only screen and (max-width: 479px) { /* Resize the body */ body {min-width:320px;} /* Resize the row */ .row {width:320px;} /* Resize the columns */ .col_12 {width:300px;} .col_9 {width:300px;} .col_8 {width:300px;} .col_6 {width:300px;} .col_4 {width:300px; margin-left:0px;} .col_3 {width:300px; margin-left:0px;} /* Fix the .last issue */ .last { margin-left:0; margin-right:10px; } }
How to change it to make design fluid..

Waiting for your advise

Thanks


Anes

Last edited by snakeair; 01-25-2017 at 06:02 AM.
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Div problem, placeholder or responsive class problem? Eelco85 Coding Forum 0 12-14-2016 09:59 AM
[WTS] ProShop - Responsive WooCommerce WordPress Theme (e-commerce theme) ColorVila Templates and Themes 2 12-17-2012 03:59 PM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 02:17 AM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC