Hi my site is www.oaktreebrides.co.uk

I have a slight issue with the website on different screen sizes, notably iPad.

I understand that bootstrap.css controls what is output on different screens: xs, sm, md and lg.

In Base3, it looks as if 'sm' is overlapped by 'md' and so never gets displayed.

At the moment, if I view the site on iPad it is showing the 'xs' (mobile) size, but I would like it show 'md' (tablet) instead.

Would it be possible to move the transition points of xs>md>lg
So that say mobile (xs) is displayed upto around 550px and then tablet (md) is displayed upto around 1000px and then desktop (lg) is displayed larger than 1000px.

If you view my site in an iPad simulator (ipadpeek.com/) you can see the problem.

Many thanks
Darren

Hi Darren,

Could you clarify what the problem is?
I'm looking on my ipad air

What position and page am I looking at?

Cheers
Paul

Hi Paul,

It's to do with the responsive transistion points, can they be adjusted?

When viewing the site on iPad (in portrait), it is displaying the mobile version of the site (xs).

eg. The menu is collapsed and the content is the mobile content. If you rotate the iPad to landscape view, then it displays the tablet content (md) eg. normal menu and tablet content.

I would like to know if it is possible to adjust the point (screen pixel-width) at which the website changes to mobile content. Maybe lower it to say 500px, so that an iPad (in portrait) still shows the tablet (md) version of the site?

Cheers
Darren

Was just reading on T3 framework site. Maybe it's the variables.less file I need to be looking at? And then do LESS to CSS?

// Media queries breakpoints
//

---

// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
@screen-phone: @screen-xs-min;

// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm: 803px;
@screen-sm-min: @screen-sm;
@screen-tablet: @screen-sm-min;

// Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md: 787px;
@screen-md-min: @screen-md;
@screen-desktop: @screen-md-min;

// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg: 1200px;
@screen-lg-min: @screen-lg;
@screen-lg-desktop: @screen-lg-min;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);

Cheers Darren

We would normally suggest changing the break points in theme magic

I'd try that first but don't think it will do what you need

Cheers
Paul

Paul,

I think the problem on the Ipad is that the menu is collapsing at 787px browser width.

This is happening as I have enabled the global setting to collapse the menu on small screens.

Where can I change the value for this global setting to lower the small screen size ?

Daz

Hi Daz,
You can adjust the collapse value in Theme Magic.
Let us know if you need more help.
Anthony

Anthony,
I am not sure which files/configuration to update so can you please help.
Daz

Hi there,

I update the vaiables.less file and changed the following variable :-

@grid-float-breakpoint:

Is this the best way ?

Many thanks

Daz

Hi Daz,

We do have a doc on custom less themes - might be worth a look

www.joomlabamboo.com/blog/how-to-joomla/editing-t3-templates-using-custom-less

Cheers
Paul