JoomlArt Forums 32,862 posts

[skatermatt Friend skatermattJoin date: February 2014Posts: 3Downloads:0Uploads:0]

#194442

Hello!
I’d like to set a minimum width for the site to force scroll bars and keep page elements from overlapping each other on smaller screen resolutions (smaller than 1280 px). I’ve tried but can’t seem to find the correct locations for the tags.

I added this to my template.css file:
#ja-wrapper {
min-width: 1280px;
width: 100% !important;
margin: 0;
background: #FFFFCC;

But this seems to have no effect.

http://tucsonaudubon.org

Thanks!
-Matt

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#521020

Is 1280px a minimum width or a maximum width?

[skatermatt Friend skatermattJoin date: February 2014Posts: 3Downloads:0Uploads:0]

#521022

Minimum width to keep the page from being any smaller than 1280px.

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#521303

@skatermatt: In order to get that, you should use the max-width rather than min-width to prevent the inside elements from overlapping. You can try to use following css rules:

#ja-wrapper {
max-width: 1280px !important;
width: 100% !important;
margin: 0;
background: #FFFFCC;
overflow: hidden;
}

[skatermatt Friend skatermattJoin date: February 2014Posts: 3Downloads:0Uploads:0]

#521565

Thanks Leo.
I made this change and it still seems to have no effect. When I minimize the screen size, all page elements overlap each other. There must be some other locations I need to modify, like for each column?

-Matt

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#521720

Hi Matt,

My suggested codes were not effective due to the min-widht of #ja-wrap you defined in index page at lines:

<style type=”text/css”>
#ja-header,#ja-mainnav,#ja-container,#ja-botsl,#ja-footer {width: 97%;margin: 0 auto;}
#ja-wrapper {min-width: 100%;}
</style>

You just need to remove the 2nd line of code blocks above. The template max-width will display properly then.

As you know, the old JA Purity J1.5 does not support the responsive feature and is also no longer supported by both Joomla community and us at JoomlArt.

In this case, we just can give you the limited support on this template version.

[Author]

Posts