Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

Mobile friendly mode - black space added


  #1  
Old Jan 13, 2019, 09:05 AM
Paul Gingell
 
10 posts · Nov 2012
England
My site is cumbria-stone-walling.co.uk.

I've used juggledad's responsive solution to reposition the right sidebar, plus a host of other @media instructions. So far I've only finished coding for small screens in portrait mode, but the plan is to have code for a range of sizes in both portrait and landscape mode.

Code:
@media only screen and (max-width: 700px) and (orientation: portrait) { }
@media only screen and (max-width: 800px) and (min-width: 701px) { }
@media only screen and (max-width: 960px) and (orientation: landscape) { }
Problem
I've got a black bar which appears on my iPhone4s between the footer and the bottom of the responsively repositioned sidebar (see attachment). That shouldn't be there. In addition, I'd like to add some space below the box which reads "Contact..." (which is td#right), so that it looks like attachment 2 - which I made up in photoshop.

The green background is given by:

Code:
#bodyrow {
    -moz-box-shadow: 0 0 110px #9CA28B inset;
    background-color: #AEB49B;
}
As things are, td#right seems to be stuck to the bottom of td#middle or #bodyrow, and adding margin-bottom to create that space doesn't seem to work.

Any suggestions gratefully received.

Paul
Attached Thumbnails
Click image for larger version

Name:	iphone4s-black-space-footer.jpg
Views:	115
Size:	33.2 KB
ID:	2816  Click image for larger version

Name:	iphone4s-black-space-footerMockup.jpg
Views:	102
Size:	33.8 KB
ID:	2817  
Attached Files
File Type: txt ata-cumbria-stone-wallingcouk-20190113.txt (50.1 KB, 112 views)
  #2  
Old Jan 13, 2019, 09:44 AM
juggledad's Avatar
juggledad
 
23,724 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Try this: go to ATO->Add HTML/CSS Inserts->CSS Inserts and find the lines:
HTML Code:
@media only screen and (max-width:500px) {
 
}
and chang it to
HTML Code:
@media only screen and (max-width:500px) {
body {background-color: #AEB49B;}
}
That black you are seeing is the page background color - which in your case is black
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Jan 14, 2019, 04:04 AM
Paul Gingell
 
10 posts · Nov 2012
England
Thanks, juggledad.

This works to an extent, but as shown in the two attachments, this solution doesn't quite work with the "box-shadow: 0 0 110px #9CA28B inset" setting I have on #bodyrow, or with the different background colours on different pages. The problem seems to be created by the margin setting in this expression:

Code:
td#right {
    border: 2px solid #494745 !important;
    margin: -50px 15px 15px !important;
    padding: 25px 5%;
}
Frankly, I could probably ditch the inset shadow command without people seeing much difference, and then it would be quite straight-forward to set a different background colour for different pages. This would make your suggestion work seamlessly.

What I'll try first is to re-write the content of the widget in td#right.

Thanks, Paul
Attached Thumbnails
Click image for larger version

Name:	iphone4s-black-space-footer2.jpg
Views:	88
Size:	41.7 KB
ID:	2819  Click image for larger version

Name:	iphone4s-black-space-footer3.jpg
Views:	82
Size:	41.6 KB
ID:	2820  
  #4  
Old Jan 14, 2019, 05:12 AM
juggledad's Avatar
juggledad
 
23,724 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
The reason for the apparent difference in the color is because on the body row you are using a box shadow, that modifies the color of that element by just a little

HTML Code:
.page-id-8 #bodyrow, .page-id-50 #bodyrow, .page-id-39 #bodyrow, .page-id-279 #bodyrow, .page-id-12 #bodyrow {

    background-color: #AEB49B;
    box-shadow: 0 0 110px #9CA28B inset;
    -moz-box-shadow: 0 0 110px #9CA28B inset;
    -webkit-box-shadow: 0 0 110px #9CA28B inset;

}
Looking at your CSS Inserts - oh boy...to speak frankly, it is a mess. You have rules that aren't attached to a selector (See end of the file) selectors with no rules, and lots and lots of rules with invalid settings. (just run it thru https://jigsaw.w3.org/css-validator/ to see)

It's like you have built a balancing house of sticks and keep adding something in to try to fix something else, but that intern creates another issue.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Jan 15, 2019, 01:28 PM
Paul Gingell
 
10 posts · Nov 2012
England
Yeah, it is a bit messy , but it seems to hold up ok. Whilst the buck stops with me, using a 13 year old computer doesn't make life easier. This theme, being of similar vintage, is mercifully about the only thing that still works correctly.

Those unused rules and selectors are mostly for content that I haven't added to the website yet.
  #6  
Old Jan 15, 2019, 03:33 PM
juggledad's Avatar
juggledad
 
23,724 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Try this, where I said change to this:
@media only screen and (max-width:500px) {
body {background-color: #AEB49B;}
}
change the color to #a7ac94 instead and see if that works
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How To make Atahualpa pass Google's 'Mobile-Friendly Test' juggledad Atahualpa 3 Wordpress theme 99 Oct 23, 2018 03:48 PM
[SOLVED] Mobile friendly? Blessings4all New Versions, & Updating 2 Jan 19, 2016 03:39 PM
How To: make Atahualpa more responsive/mobile friendly bswb97 Atahualpa 3 Wordpress theme 16 Jan 10, 2015 11:22 AM
plugin that shows a mobile-friendly version Atahualpa site Carme Plugins & Atahualpa 11 May 3, 2014 07:17 PM


All times are GMT -6. The time now is 08:42 PM.


Powered by vBulletin® Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.