Sample media query for container

[themartist]

I tested the site out on someones macbook 13 inch and I noticed how the one page navigation pagination was awfully close to the standard width container. I’ve tried to play with css media queries to sort this out but am a bit clueless.

From 1270 to 1200 there is some overlap. 1250 is bad. 1200 is totally overlapping. Beneath 1200 it shifts correctly.

Could you give a sample custom css that where the browser is lets say 1170, the standard width container is about 900.

I could play around with it if you can just give me a starting point.

[David Martin – Support]

Hi,

Macbook 13 inch or Macbook 13 inch Retina?

A sample media query would look like so:

@media screen and (min-width: 1025px) and (max-width: 1280px) {

/* Styles for size */

}

You can amend those sizes for your desired min, max widths.

– David.

[themartist]

This reply has been marked as private.

[David Martin – Support]

Can you provide a screenshot for my reference?

Thanks.

[themartist]

This reply has been marked as private.

[themartist]

any word there David?

[themartist]

This reply has been marked as private.

[David Martin – Support]

PLEASE NOTE: Adding an extra reply to your topic, as per our support policy, will take it back in the queue and take us longer to reply to you. Please refrain for doing this. If you need to add extra info, then please edit your last reply.

1)I am viewing this on my Macbook 13″ Retina and it looks great.

The only way to replicate this is bring the browser size down further. This should be auto resized. I do see 17 JS errors in my console. Are you on the latest theme version (1.2.60) and SF plugin (2.4.0)

2)

I do not see anything wrong with your Work page on iPad Portrait/Landscape?

Homepage also:

[themartist]

Yup, all is looking right now. Made adjustments over the weekend. The workaround was to not use window height at all. It doesn’t work on iPad. Had to keep content height. Seems as if all your swift demos use content height for mobile/ipad and not window height.

As far as the errors, I don’t know what is causing that. I’m on the latest build v2.4.1.

[David Martin – Support]

Glad you got it sorted. This maybe of use to you: You can set certain elements such as a Row to be visible only on certain screen sizes: Desktop / Tablet / Mobile or any variation in between. This allows you to create custom layouts for different screen sizes which may help you further.

Thanks.

[themartist]

This is my third swiftideas theme. Cardinal, Joyn and Uplift so I’m relatively well versed with how it all works regarding visibility in rows. This isn’t the issue as everything is very well organized on the backend. However there are still bugs which happen – as mentioned, setting window height isn’t working – and had to workaround that by using only content height for responsiveness.

Not the option I wanted, but was at least a workaround for now until you manage to fix it.

As far as the js error, I’d appreciate if you could take a look to see if its still happening.

[David Martin – Support]

Sure, I’ll take a look on my dev version and see if I can replicate and provide a solution. Just to confirm this:

Row asset = true
window height = true
When viewed on mobile, window height is not respected and reduced down?

Thanks.

[themartist]

Yeah. Window height seems to be respected on mobile but not on tablet.

More worrying however is that I’m finding major issues with the site not playing nicely on firefox. Even simple pages like contact just aren’t loading. Disabled plugins, disabled firefox adbluck, cleared cache, latest WP, latest theme and latest browsers. All perfect on OS X with safari and Chrome. Just firefox the problem. Could you take a look.

Obviously not working on such a major browser is more important than some of the minor aesthetic bits and pieces. The page size is a little high, but still not bad enough to warrant whats happening.

[David Martin – Support]

What is specifically wrong with the page in FF? FOr me all looks normal?

[themartist]

Its weird. For me the site just doesn’t load in firefox. Happy that at least its working your side.