Joomla Templates Club 406,261 posts

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#747789

If you want to set width with wide layout, you can use this case.

@media (min-width: 1200px) {
.container {
width: 1230px;
}
.navbar {
width: 1250px;
text-align: centre;
margin-right: auto;
margin-left: auto;
}
}

it only effects with wide layout and not tablet or mobile layout.

About off-canvas position, it only shows on mobile layout.

[muthumbi Friend muthumbiJoin date: March 2010Posts: 59Downloads:83Uploads:7 Thanks: 1 Thanked: 1 times in 1 posts]

#747809

i have decided to redo the whole template as i do not know where i edited that changed the mobile layout.

[muthumbi Friend muthumbiJoin date: March 2010Posts: 59Downloads:83Uploads:7 Thanks: 1 Thanked: 1 times in 1 posts]

#747987

<em>@Ninja Lead 490992 wrote:</em><blockquote>If you want to set width with wide layout, you can use this case.

@media (min-width: 1200px) {
.container {
width: 1230px;

}
.navbar {
width: 1250px;
text-align: centre;
margin-right: auto;
margin-left: auto;
}
}

it only effects with wide layout and not tablet or mobile layout.

About off-canvas position, it only shows on mobile layout.</blockquote>

i have implemented this and i believe it is what i expected. thanks alot.

I however have some more questions on display on mobiles.
1. the slideshow seems to display very well on all screens but not masshead image which shows some parts are cut or hidden. How can i make the image show in full.
support url http://www.africanmemorablesafaris.com/amemsafaris/index.php/last-minute/2-days-1-night-masai-mara-national-park-ams-016

2. I have a table that runs across the width of a content page (article), on mobile layouts it is also being cut, how can i make it show on mobile devises in full without being cut.
support url http://www.africanmemorablesafaris.com/amemsafaris/index.php/birding-safaris/birding-safari-at-tsavo-east-west-national-park-and-saltlick-4-days-3-night-ams-026

see attached images for more understanding as how they appear on mobile

thanks for your help

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#748024

Hi,

My solution below will help you to fix both your problem above

Open templates/ja_university_t3/css/custom.css file and add new rule

@media (max-width: 767px) {
.main .jamasshead {
width: 100%;
height: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
min-height: initial !important;
}
.article-content table {
width: 100% !important;
height: 100% !important;
}
}


Regards

[muthumbi Friend muthumbiJoin date: March 2010Posts: 59Downloads:83Uploads:7 Thanks: 1 Thanked: 1 times in 1 posts]

#748114

The solution works, but the masshead image does not resolve as it should, the image stretches up and the width is squeezed.
http://mobiletest.me/nokia_lumia_920_emulator/?u=http://www.africanmemorablesafaris.com/amemsafaris
I also wonder why the green background wont flow all the way down its like the main body is covering it up or has some different width that i can seem to resolve.
http://mobiletest.me/nokia_lumia_920_emulator/?u=http://www.africanmemorablesafaris.com/amemsafaris

the images on front page also wont resolve well on some of the screens. for example these http://mobiletest.me/ipad_mini_emulator/?u=http://www.africanmemorablesafaris.com/amemsafaris how can i make the featured images smaller automaticlly without having to edit them manually.

I would also want to reduce the size of the side bar abit to give space to the featured articles, where do i reduce,

thanks for the help

am

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#748173

Hi,

I checked the templates/ja_university_t3/css/custom.css file and saw the custom css code there, the problem on your site is from these customization and not bug from our product, you need to hire a developer to help you out with the custom work because it’s out of JA support scope.

About the problem as you mentioned above you can fix with my solution below


.t3-content {
background: #F7F5CC ;
}

.t3-mainbody {
background: #91A11A ;
}

.article-intro h4, .article-content h4 {
float: left;
}


Regards

[muthumbi Friend muthumbiJoin date: March 2010Posts: 59Downloads:83Uploads:7 Thanks: 1 Thanked: 1 times in 1 posts]

#748317

this partof the code

.article-intro h4, .article-content h4 {
float: left;

interfered with the flow of the articles as you can see here..

http://www.africanmemorablesafaris.com/amemsafaris/index.php/last-minute/3-days-2-nights-tsavo-east-and-amboseli-ams-020

I do understand what you mean by looking for a developer, though i am trying to learn myself so i don’t mind trying and failing till i get it.

My main issue however is the way the site masshead displays on mobile phones. It is quite outstretched. The soluton you gave on masshead worked but then the image does not appear responsive.

thanks

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#748414

Hi,

Due to our policy, JA support scope will cover bug fix or setup alike demo sitehelp you to make your site like as our demo. You can always request support from us, but you need take in your mind that customization is not part of JA support scope. That’s why I asked you to hire a developer to help you to fix the custom work problem on your site.

I could not see the problem under JA Masshead module as you mentioned above. You can post URL of page where problem can be seen or attach screenshot here.

About the problem image content in custom html module, you can use my css below

.t3-module .custom img {
width: 100%;
height: 100%;
}

Regards

[muthumbi Friend muthumbiJoin date: March 2010Posts: 59Downloads:83Uploads:7 Thanks: 1 Thanked: 1 times in 1 posts]

#748753

If you use this link to test and then you browse through the different mobile devices you will see what i mean. i just want to understand where the problem is coming from. I am very new to mobile and don’t mind help. http://mobiletest.me/nokia_lumia_920_emulator/?u=http://africanmemorablesafaris.com/index.php/kenya-safaris2/group-safaris

Also, is developer account considered in customizing help? just want to know in advance.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#748764

Can you give me a screenshot of the problem on your site?

[muthumbi Friend muthumbiJoin date: March 2010Posts: 59Downloads:83Uploads:7 Thanks: 1 Thanked: 1 times in 1 posts]

#748877

the site seems ok, as the screen shot attached compared to mobile as the image no2

i am using nokia 520 and the image looks big but squeezed.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#748941

Hi,

The dimension for the width is so large while the height is small that’s why on mobile layout it was cover. Maybe you can use this way to show the image on mobile

@media (max-width: 767px) {
.jamasshead h3 {
font-size: 10px !important;
}

.main .jamasshead {
background-size: contain !important;
}
}


Hope it helps

Regards

[muthumbi Friend muthumbiJoin date: March 2010Posts: 59Downloads:83Uploads:7 Thanks: 1 Thanked: 1 times in 1 posts]

#882593

This solution helped alot, the image appears propotional, but the problem now is that it does not cover the whole background. There is quite a big empty space left at the bottom. When i use background-size: 100% 100% aspect, the image covers whole background but it is stretched upwards meaning the height wont respond. Any idea will be highly appreciated. new link is http://www.africanmemorablesafaris.com/index.php/honeymoon-safaris/tsavo-east-national-park-tamarind-dhow-cruise-dinner-3-days-2-nights-ams-022 for tests.

[muthumbi Friend muthumbiJoin date: March 2010Posts: 59Downloads:83Uploads:7 Thanks: 1 Thanked: 1 times in 1 posts]

#882595

this line of code makes the image proportional and there is no empty space but if there are better solutions, will highly appreciate. Am however comfortable with it.

.main .jamasshead {
 background-size: 100% 100%;
min-height: 250px;

}

1 user says Thank You to muthumbi for this useful post

1. Ninja Lead

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#883253

Nice try! You can use this way to fix the problem on your site.

1 user says Thank You to Ninja Lead for this useful post

1. muthumbi

[Author]

Posts