Forum Replies Created

Viewing 20 posts - 1 through 20 (of 49 total)

1 2 3 →

Author

Posts
July 10, 2015 at 3:08 pm in reply to: CSS OverFlow Question with Enterprise Pro #159050

Gandt
Member

My pleasure, glad I could help.

G

July 9, 2015 at 6:36 pm in reply to: Parallax Home Image not working on phones #158981

Gandt
Member

Oh 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:

http://caniuse.com/#feat=object-fit

July 9, 2015 at 4:17 pm in reply to: Parallax Home Image not working on phones #158975

Gandt
Member

That'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.

July 9, 2015 at 3:52 pm in reply to: Parallax Home Image not working on phones #158971
Gandt
Member
Davidd, 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
G
July 9, 2015 at 3:12 pm in reply to: Mobile Frienldy Issues and Problems #158966

Gandt
Member

Since 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
G

July 9, 2015 at 3:04 pm in reply to: More Space under send comment #158965

Gandt
Member

That'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.

July 9, 2015 at 1:41 pm in reply to: Mobile Frienldy Issues and Problems #158956

Gandt
Member

Rnaderpo:

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

July 9, 2015 at 1:39 pm in reply to: More Space under send comment #158955

Gandt
Member

Always 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

July 9, 2015 at 1:38 pm in reply to: Images not Responsive #158953

Gandt
Member

As 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

July 9, 2015 at 1:35 pm in reply to: Always use class instead of id selector? #158952

Gandt
Member

I 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

July 9, 2015 at 1:28 pm in reply to: Parallax Pro in Mobile #158950

Gandt
Member

Chrisb & davidd, please post links to your respective sites so I can assist in providing the necessary CSS fixes.

G

July 9, 2015 at 1:27 pm in reply to: Changing content width of minimum #158949
Gandt
Member
abarker:

This line is what keeps your content from going past a certain width:
```
.fl-row-fixed-width {
  max-width: 1100px;
}
```
G
July 9, 2015 at 1:08 pm in reply to: Remove bullets in front of icons – Executive Pro theme #158946
Gandt
Member
You 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
G
July 9, 2015 at 12:53 pm in reply to: Different logo for Specific pages #158930
Gandt
Member
Jack, 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
ENGINEERING

So, 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
July 9, 2015 at 12:33 pm in reply to: CSS OverFlow Question with Enterprise Pro #158928

Gandt
Member

Micha, 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
G

July 9, 2015 at 12:23 pm in reply to: Making Header Full WIdth and Responsive – Agency Pro #158924

Gandt
Member

What's the URL of the site you're working on?

G

July 9, 2015 at 12:22 pm in reply to: Author Pro Image Size #158923

Gandt
Member

CAHuggins

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

July 9, 2015 at 9:48 am in reply to: (Lifestyle Pro) Flickering and Padding issue #158911
Gandt
Member
rawfoodsgirl:

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
G
July 9, 2015 at 9:39 am in reply to: Theme looks bad on phone. #158907
Gandt
Member
rawfoodsgirl:

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
G
July 9, 2015 at 9:34 am in reply to: right header widget does not scale in magazine pro #158905
Gandt
Member
Claudiar

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
Author

Posts