Joomla Templates Club 406,261 posts

[matwes Friend matwesJoin date: December 2010Posts: 47Downloads:0Uploads:15 Thanks: 8 Thanked: 2 times in 1 posts]

#201545

Hi,

I found the JA Vintas default template only partially adopt to the screen on my iPad Air. It’s the menu bar’s banner that is not fully visible on the left and right side respectively. Also, the slideshow is too wide on the iPad which makes it disappear partially on the right side (screen image attached). Where should I look to be able to customize the layout? I do not find css-files for handheld, iphone etc. In other respects the page looks fine on the iPad.

Thanks,
Matt

---

Attachments:

1. 

[Eragon H Friend Eragon HJoin date: July 2014Posts: 468Downloads:1Uploads:39 Thanks: 5 Thanked: 156 times in 149 posts]

#550592

Kindly change the below code in

1. root/templates/css/templates.css : add below code to the end of file

/* Fix layout on ipad */
body.bd .main {
max-width: 950px !important;
width: 100% !important;
}

body#bd #ja-wrapper{
width: 100% !important;
min-width: 300px !important;
}

2. root/templates/css/mod_jaslideshowlite.css
a. From:

.ja-ss-wrap {
margin: 0 auto;
position: relative;
width: 1090px;
}
To:

.ja-ss-wrap {
margin: 0 auto;
position: relative;
max-width: 1090px;
width: 100% !important;
}

b. From:

.ja-ss-items {
border: 10px solid #ded3c6
margin: 0 auto;
position: relative;
overflow: hidden;
width: 950px;
}
To:

.ja-ss-items {
border: 10px solid #ded3c6
margin: 0 auto;
position: relative;
overflow: hidden;
width: 95%;
}

3. Regarding the Menu, there is no space to show the left and right in the portrait view of ipad, so I keep it as current

You site in portrait view of iPad will look like this: http://prntscr.com/4psqt5

Remember to clear JAT3 Cache and Browser cache to see the changes

1 user says Thank You to Eragon H for this useful post

1. matwes

[matwes Friend matwesJoin date: December 2010Posts: 47Downloads:0Uploads:15 Thanks: 8 Thanked: 2 times in 1 posts]

#550715

Thank you very much Eragon!

The slideshow looks fine now. I’m still struggling with the banner behind the main menu. It is narrowed down to the same width as the slideshow when browsing the site in Safari. But it is still chopped off on the iPad, regardless of if the ipad is in portrait mode or in landscape mode. Isn’t that a little strange? Should behave the same way on both platforms, shouldn’t it?

Best,
Matt

<em>@Eragon H 447108 wrote:</em><blockquote>Kindly change the below code in

1. root/templates/css/templates.css : add below code to the end of file

/* Fix layout on ipad */
body.bd .main {
max-width: 950px !important;
width: 100% !important;
}

body#bd #ja-wrapper{
width: 100% !important;
min-width: 300px !important;
}

2. root/templates/css/mod_jaslideshowlite.css
a. From:

.ja-ss-wrap {
margin: 0 auto;
position: relative;
width: 1090px;
}
To:

.ja-ss-wrap {
margin: 0 auto;
position: relative;
max-width: 1090px;
width: 100% !important;
}

b. From:

.ja-ss-items {
border: 10px solid #ded3c6
margin: 0 auto;
position: relative;
overflow: hidden;
width: 950px;
}
To:

.ja-ss-items {
border: 10px solid #ded3c6
margin: 0 auto;
position: relative;
overflow: hidden;
width: 95%;
}

3. Regarding the Menu, there is no space to show the left and right in the portrait view of ipad, so I keep it as current

You site in portrait view of iPad will look like this: http://prntscr.com/4psqt5

Remember to clear JAT3 Cache and Browser cache to see the changes</blockquote>

[Eragon H Friend Eragon HJoin date: July 2014Posts: 468Downloads:1Uploads:39 Thanks: 5 Thanked: 156 times in 149 posts]

#550744

For the banner behind the menu, you can add this code to the template.css. This can help you solve the issue on iPad

#ja-megamenu{
margin-left: 26px !important;
margin-right: 26px !important;
}
#ja-mainnav .rb-left{
left: 0px !important;
}
#ja-mainnav .rb-right{
right: 0px !important;
}

1 user says Thank You to Eragon H for this useful post

1. matwes

[matwes Friend matwesJoin date: December 2010Posts: 47Downloads:0Uploads:15 Thanks: 8 Thanked: 2 times in 1 posts]

#553590

Thanks a lot! Now it looks great! 😀

Very best,
Mattias

<em>@Eragon H 447300 wrote:</em><blockquote>For the banner behind the menu, you can add this code to the template.css. This can help you solve the issue on iPad

#ja-megamenu{
margin-left: 26px !important;
margin-right: 26px !important;
}
#ja-mainnav .rb-left{
left: 0px !important;
}
#ja-mainnav .rb-right{
right: 0px !important;
}
</blockquote>

[Author]

Posts