Joomla Templates Club 406,261 posts

[TzuChi Foundation Friend TzuChi FoundationJoin date: September 2014Posts: 39Downloads:0Uploads:12 Thanks: 10]

#202391

Hi,

Urgent! Going to pass over website tomorrow noon. Please help!

Please refer to attachment.

Header area:
1. Replace the area with an image. and it will be my logo as well.
2. The image gonna be responsive in mobile phone.

Slideshow:
1. show the slideshow position in mobile phone
2. the module have to be responsive as well.

How/ which file show modified on it?
Appreciate if you have any idea on it.

---

Attachments:

1. 

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

#553993

So that we can try to best assist you, please provide the url of the site you’re working on,
as well as temporarily set “Optimize CSS” to “Off/No” within your Template Manager–General settings.

[TzuChi Foundation Friend TzuChi FoundationJoin date: September 2014Posts: 39Downloads:0Uploads:12 Thanks: 10]

#553997

Hi TomC,

i’m trying to make it like this:
refer attachment:

Here is the live site http://bit.ly/10Njqxd
“Optimize CSS” is temporarily set to “Off/No”

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

#553999

To increase the width of your header container . . . .

Within file path –> /templates/ja_zite/css/template.css
at line 673, modify as follows:


#ja-header .main {
background-image: url("../images/header-11.jpg");
margin-bottom: 10px;
text-align: center;
width: 1130px;
z-index: 10;
}

As for how you want your logo to appear on your site, can you throw together a screenshot mockup of how you want the final result to be/display? (i.e. your full width logo image – as described within the previous image attachment above)

[TzuChi Foundation Friend TzuChi FoundationJoin date: September 2014Posts: 39Downloads:0Uploads:12 Thanks: 10]

#554008

Thanks for your quick response.
Here is the mockup, this full width will be look like just same in mobile phone for header and slideshow.
Currently the mobile landscape view just mess up…:((

---

Attachments:

1. 

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

#554013

To remove the right side border . . .

Within file path —> /templates/ja_zite/css/template.css
at line 323, modify as follows:


div.item-page {
border-right: none;
margin-top: 10px;
padding-right: 20px;
}

SAVE CHANGES – CLEAR CACHE – REFRESH PAGE

Not certain how much more to the right you want your text/content
– it seems pretty snug at the moment.

[TzuChi Foundation Friend TzuChi FoundationJoin date: September 2014Posts: 39Downloads:0Uploads:12 Thanks: 10]

#554043

Thanks TomC!

However most important is that, i need to fix the max width for slideshow to be 980px, not expend header only.
and the header to be the logo part.

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

#554044

To reduce the width of the slideshow . . .

Within file path —> /templates/ja_zite/css/template.css
at line 730, modify as follows:


#ja-slideshow {
margin: 0 auto;
width: 980px;
z-index: 10;
}

Is that what you wanted ??

[TzuChi Foundation Friend TzuChi FoundationJoin date: September 2014Posts: 39Downloads:0Uploads:12 Thanks: 10]

#554046

ya, one more step closer!

1. my slideshow image is 980px * 300px
now it show nice at desktop, but at mobile phone it show 300px as height. i want it be height will proportional resize as well.

2. the green part of header, how could it be the logo and proportional resize in mobile phone later?
my logo size is 980px*300px

3. I have another thread here, which show that Responsive landscape view is not 100%
http://www.joomlart.com/forums/topic/responsive-landscape-view-not-100/

[TzuChi Foundation Friend TzuChi FoundationJoin date: September 2014Posts: 39Downloads:0Uploads:12 Thanks: 10]

#554049

Hi,

Any luck for it?
Many thanks~

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#554483

You should use the media jQueries to add style for specific screen resolution: http://code-tricks.com/css-media-queries-for-common-devices/

[Author]

Posts