Forum Replies Created
-
AuthorPosts
-
Gandt
MemberMy pleasure, glad I could help.
G
Gandt
MemberOh well, in that case then you don't need to use contain, you can just go for background-size:150% auto; for example.
Contain is currently not well supported:
Gandt
MemberThat's odd, I just checked your site @ my iphone and I don't see the parallax effect kicking in when I go further down the page.
Gandt
MemberDavidd, I found a solution. Yet to be tested on iphone but valid on browser window resize:
The reason the parallax effect works - part of it anyway - is because it is using background-attachment:fixed;
For some reason, one of your media queries has this:
@media only screen and (max-width: 768px) .home-section-1, .home-section-3, .home-section-5 { background-attachment: scroll;
When I change it to 'fixed' instead of 'scroll', it revives the functionality of the parallax effect.
Give it a try, I'd test it on my iphone but I can't since I can only make temporary/local changes to your site with chrome's editor tool.
Regards
GGandt
MemberSince I cannot edit my previous post, here are some refs as suggested by Erik:
http://www.searchenginejournal.com/flawed-google-mobile-usability-test-results/127623/
http://cscinteractive.us/mobile-user-experience-optimization/Regards
GGandt
MemberThat's a bold statement Erik. Please indicate which responses are misleading, confusing, or worse yet, tantamount to troll-like behaviour. I find it ironic that you ask for 'references' in reply to one of my comments earlier yet provide zero specifity to back up such a nonsensical claim as 'tantamount to troll-like behaviour'.
I was unaware that helping people who got no responses or clear directions over the past 30 days warranted such a sensitive reaction from you.
In any case, you are more than free to change your notification settings to a configuration of your liking. The people who asked the questions will surely appreciate getting some help, even if it came a bit late.
Gandt
MemberRnaderpo:
As pointed out earlier, don't rely heavily on google's interpretation of mobile. Their automated diagnostics tool has a lot of issues as of today.
G
Gandt
MemberAlways post a link of your site so everyone can better understand the fine details of your issues. Marcy gave you a proper suggestion based on the little information provided but it's nonetheless better to link us to something whenever possible.
G
Gandt
MemberAs long as your sites ARE responsive, I wouldn't worry about what google's automated diagnostic tool says, it is very error-prone. Just recently google started incorporating responsiveness into their algorithms and as Brad pointed out, it is still very unreliable. I'd just wait for them to bring up the next version.
G
Gandt
MemberI do not generally side in favour of adding the element itself to the css selector if it already has an ID or CLASS, for example:
<div class="something">
Is perfectly fine being addressed as
.something
You can target it using
div.something
, but it serves no purpose other than bloat your code.The idea is that you always have the minimum amount of specificity necessary.
G
Gandt
MemberChrisb & davidd, please post links to your respective sites so I can assist in providing the necessary CSS fixes.
G
Gandt
Memberabarker:
This line is what keeps your content from going past a certain width:
.fl-row-fixed-width { max-width: 1100px; }
G
Gandt
MemberYou are right, half way, in using the list-style-none; rule, however, you do not apply it to the LI element but to the UL parent, thus:
(or whatever the
<ul>
is called)#payment_method_bacs { list-style:none; }
Hope this helps
GGandt
MemberJack, if by logo you mean the one you currently have set to 'REDBOURN' on the top left of your screen, then the answer is simple. You want a different logo for each of your three pages:
INNOVATION
TECHNOLOGY
ENGINEERINGSo, we must start by making sure each of these pages is loading a different class for the body or page. I prefer using body.
This would mean the <body> element would thus look like:<body class="innovation"> <body class="technology"> <body class="engineering">
To achieve this, if you don't already know how, go to your wp-admin dashboard, go to each of the individual pages in question (innovation, technology and engineering) and specify the custom class there:
Now that each of your pages has that specific class allocated in the body element, we can now target them independently via css without making a mess.
You are currently using:
.header-image .site-header .title-area { background-image: url("http://sievecreative-dev.co.uk/redbourn/wp-content/uploads/2015/07/Redbourn.png"); background-position: center center; background-repeat: no-repeat; height: 60px; width: 222px;
So you can add to this already existing css declaration with similar copies, like this:
body.innovation .header-image .site-header .title-area { /* different background declaration tareting different image goes here */ } body.technology .header-image .site-header .title-area { /* different background declaration tareting different image goes here */ } body.engineering .header-image .site-header .title-area { /* different background declaration tareting different image goes here */ }
Hope this helps
G
Gandt
MemberMicha, yes, the issue and the fix are simple.
In order for a containing div to properly manage other divs inside it that have float properties, it must have display:block+overflow:hidden. So, what you need to do is:
.site-container {
display: block;
overflow: hidden;
width: 100%;
}That fixed the issue for me, look at this screenshot taken from my end to illustrate how the annoying horizontal navbars are all gone:
Hope this helps
GGandt
MemberWhat's the URL of the site you're working on?
G
Gandt
MemberCAHuggins
As of today, I see 3 books per row. It seems like you fixed the issue. It also scales properly as you resize the window. How many books per row did you want?
G
Gandt
Memberrawfoodsgirl:
in the lovebugoils site, the issue is this:
.header-image .site-title a { float: left; min-height: 310px; width: 100%;
and
@media only screen and (max-width: 767px) .header-image .site-title a { background-size: contain !important;
you are defining that 310px height while at the same time asking the image to keep its proportions.
What you need is to set that min-height to:
min-height: 125px;
and a background-size rule as:
background-size:100% auto !important;
Take a look at this screenshot I took after making the changes, assuming I understood you correctly on what the intended final result was:
Hope this helps
GGandt
Memberrawfoodsgirl:
As of today, there is no blue there. It just looks oddly cropped. What was the last change you made to it?
What I would suggest, and imo, this is the most straightforward way around scaling images for mobile, is don't add the image as content.
Scaling
<img>
elements included in the html is difficult and unnecessary. Add background images via css using:background:url(..path to the image goes here...) no-repeat scroll center center transparent; background-size:auto 100%;
Give it a try and if you still feel stuck, I'll gladly walk you through the steps over skype.
Regards
GGandt
MemberClaudiar
It doesn't scale because the flash
<object>
has inline styles with this css:border: 0px; padding: 0px; margin: 0px; text-align: left; width: 300px; height: 250px;
As the width value is a fixed number, it won't scale. You would need to replace that with width:100%; for example.
G
-
AuthorPosts