Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Instruction to pass google mobile friendly test and make the theme responsive #1

Open
extremecarver opened this issue Jun 27, 2023 · 2 comments
Open

Instruction to pass google mobile friendly test and make the theme responsive #1

extremecarver opened this issue Jun 27, 2023 · 2 comments

Comments

@extremecarver
Copy link
Collaborator

extremecarver commented Jun 27, 2023 •
edited
Loading

This is the most important help topic in the forum - and should the bytesforall.com forum go down - here is a backup:
http://forum.bytesforall.com/showthread.php?t=23158
Originally posted by Juggledad.

To get your Atahualpa site pass the Google 'Mobile-Friendly Test' do the following. This will make your site mobile friendly. If you don't pass the test after doing this - disable ALL your plugins and test again to see if a plugin is causing the issue.

  1. go to ATO->Style & configure LAYOUT->Layout WIDTH and type (FLUID or FIXED) and set it to a percentage (as opposed to a 'fixed' width) then set the 'Layout MIN width' option to 320 (iPhone 4 size) or remove it altogether.

  2. add the following to ATO->Add HTML/CSS Inserts->HTML Inserts: Header

<meta name=viewport content="width=device-width, initial-scale=1",  user-scalable=yes>
  1. add the following to ATO->HTML Inserts: Body Tag
<body onresize="OnResizeDocument()" >
  1. Add the following to ATO->Add HTML/CSS Inserts->HTML Inserts: Body Bottom
<script>
jQuery(document).ready(function($) {
    if( $(window).width() < 768 ) {
        // If any left sidebar exists
        if ( $('#left').length || $('#left-inner').length ) {   
            $("#middle").detach().prependTo('#bodyrow'); 
        }
    }
});
</script>

<script type="text/javascript">

  function OnResizeDocument () {
    if( window.innerWidth < 767 ) {
  //    jQuery(function($) {$("#middle").detach().prependTo('#bodyrow'); } );
    }
    if( window.innerWidth > 767 ) {
      jQuery(function($) {$("#left").detach().prependTo('#bodyrow');   } );
    }
  }
</script>
  1. add the following to ATO->Add HTML/CSS Inserts->CSS Inserts
@media only screen and (max-width: 767px) {
    table#layout,
    table#layout > tbody,
    table#layout > tbody > tr,
    table#layout > tbody > tr > td,
    table#layout > tr,
    table#layout > tr > td,
    table#layout td#header,
    table#layout td#left,
    table#layout td#left-inner,
    table#layout td#middle,
    table#layout td#right,
    table#layout td#right-inner,
    table#layout td#footer {
        display: block;
    }
    table#layout > colgroup {
        display: none;
    }
    div#wrapper,
    td#middle {
        width: auto;
    }
}
.hentry img { 
    max-width: 99%;    
    height: auto !important; 
    display: block !important; 
}

Note: in steps 4 and 5 you can adjust the number (767) to suit your choice.

Thanks to Flynn, sawyerjw, yukoner, kayphoonstar and extremecarver for their contributions.
@extremecarver
Copy link
Collaborator Author

extremecarver commented Jun 27, 2023 •
edited
Loading

I'm have extended this a bit for a dynamic width depending on screen size also for desktop - this gives a bit more of an example what is possible with CSS Inserts:

/* #### small Desktops #### */
@media screen and (min-width: 801px){
	tbody {max-width: 1080px; margin: auto;}
	div#container {max-width: 1080px; margin: auto;}
	table#layout {max-width: 1080px; margin: auto; font-size: 0.80em;}
}

/* #### HD Desktops #### */
@media screen and (min-width: 1260px){
	tbody {max-width: 1250px; margin: auto;}
	div#container {max-width: 1250px; margin: auto;}
	table#layout {max-width: 1240px; margin: auto; font-size: 0.85em;}
}

/* #### FHD Desktops #### */
@media screen and (min-width: 1800px){
	tbody {max-width: 1280px; margin: auto;}
	div#container {max-width: 1280px; margin: auto;}
	table#layout {max-width: 1270px; margin: auto; font-size: 0.90em;}
}

/* #### QHD Desktops #### */
@media screen and (min-width: 2400px){
	tbody {max-width: 1420px; margin: auto;}
	div#container {max-width: 1420px; margin: auto;}
	table#layout {max-width: 1410px; margin: auto; font-size: 1.0em;}
}

/* #### UHD Desktops #### */
@media screen and (min-width: 3000px){
	tbody {max-width: 1550px; margin: auto;}
	div#container {max-width: 1550px; margin: auto;}
	table#layout {max-width: 1540px; margin: auto; font-size: 1.1em;}
}

@media screen and (min-width: 960px) {
     .alignwide, .alignfull {
          width:  100vw;
          max-width:  100vw;
          margin-left:  calc(50% - 50vw);

     }
	body {
     	overflow-x:  hidden;
	}
}



@media only screen and (max-width: 800px) {
    table#layout,
    table#layout > tbody,
    table#layout > tbody > tr,
    table#layout > tbody > tr > td,
    table#layout > tr,
    table#layout > tr > td,
    table#layout td#header,
    table#layout td#left,
    table#layout td#left-inner,
    table#layout td#middle,
    table#layout td#right,
    table#layout td#right-inner,
    table#layout td#footer { display: block; }
    table#layout > colgroup { display: none; }
    div#menu1 { display: none; }
    div#wrapper,
    td#middle { width: auto; margin 0; padding 0; }
    div#toc_container { line-height: 200%; }
    table#layout { font-size: 0.85em; margin 0; padding 0; }
    h1 { font-size: 1.8em; font-weight: normal; line-height: 1.2; margin: 0.3em 0 10px; color: #7F2F2F; }
    h2 { font-size: 1.65em; font-weight: bold; line-height: 1.3; margin: 1em 0 .2em; }
    h3 { font-size: 1.5em; font-weight: bold; line-height: 1.3; margin: 1em 0 .2em; }
    h4 { font-size: 1.3em; font-weight: bold; line-height: 1.35; margin: 1.33em 0 .2em; }
    h5 { font-size: 1.2em; margin: 1.67em 0; line-height: 1.4; font-weight: normal; }
    h6 { font-size: 1.2em; margin: 1.67em 0; line-height: 1.4; font-weight: normal; }
    p { font-size: 1.05em; margin: 1.67em 0; line-height: 1.5; font-weight: normal; }
    .comment-meta a { margin: 0px 15px 0px 0px; line-height: 200%; }
    div.widget ul li { margin: 6px 0 12px 0px; }
    .hentry img { 
    max-width: 99%;    
    height: auto !important; 
    display: block !important;  }
}

img { border: 0 none; height: auto; max-width: 100%; vertical-align: middle; }

div.header-image-container { padding-top: 0px; margin-top: 0px;}
div.sticky div.post-footer {display: none;}

h1 { font-size: 30px; font-weight: normal; line-height: 1.2; margin: 0.3em 0 10px; color: #7F2F2F; }
h2 { font-size: 24px; font-weight: bold; line-height: 1.3; margin: 1em 0 .2em; }
h3 { font-size: 20px; font-weight: bold; line-height: 1.3; margin: 1em 0 .2em; }
h4 { font-size: 18px; font-weight: bold; margin: 1.33em 0 .2em; }
h5 { font-size: 1.5em; margin: 1.67em 0; font-weight: normal; }
h6 { font-size: 1.3em; margin: 1.67em 0; font-weight: normal; }


<style>.wp-block {
    max-width: 1920px;
}</style>

Then goto ATO Next-Previous Navigation and set:
Show Page Numbers (Pagination) for COMMENTS Navigation
to NO.

Last but not least - Atahualpa footer on posts/pages is not mobile friendly. I solved it by changing Footer Homepage and Footer Multi Post to:
%date('F jS, Y')% | %tags-linked('Tags: ', ', ', ' | ')% %comments('Leave a comment', 'One comment', '% comments', 'Comments are closed')% %edit(' | ', 'Edit this post', '')%

(note I took out category - you could alternatively try to get in some decent spacing - I did not manage that however).

@extremecarver
Copy link
Collaborator Author

You will also need a mobile responsive menu plugin - as the normal atahulpa menu is not usable if you use pagination.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@extremecarver