Joomla Templates Club 406,261 posts

[benteveo Friend benteveoJoin date: December 2010Posts: 25Downloads:0Uploads:2 Thanks: 4]

#167435

Hi!

I’m working on a project with JA Pyro’s template and I have done several changes on the header. The visualization looks fine if you see the site with zoom 100%. The problem is that if zoom in or out, the header does no fit the rest of the content. I think this might be fixed with some CSS code, but I need some help. Any idea?

Thanks in advance!

[pritam Friend pritamJoin date: April 2011Posts: 609Downloads:0Uploads:29 Thanks: 11 Thanked: 125 times in 113 posts]

#406476

Hello benteveo ,

To Problem with Header when changing zoom

Find this code to /templates/ja_pyro/css/template.css line no.1152

#ja-header {
background-color: #ECEEEB;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
border-left-color-value: #626262;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-left-style-value: solid;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-left-width-value: 2px;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-right-color-value: #626262;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
border-right-style-value: solid;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-right-width-value: 2px;
line-height: normal;
margin-bottom: -2px;
margin-left: 351px;
margin-right: 0;
margin-top: -37px;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
position: relative;
width: 957px;
z-index: 10;
}

Change this code to :-

#ja-header {
background-color: #ECEEEB;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
border-left-color-value: #626262;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-left-style-value: solid;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-left-width-value: 2px;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-right-color-value: #626262;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
border-right-style-value: solid;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-right-width-value: 2px;
line-height: normal;
margin-bottom: -2px;
margin-left: 351px;
margin-right: 0;
margin-top: -37px;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
position: relative;
width: 957px;
z-index: 10;
right:198px;/*set pixel as per reqiurement*/
}

[Val Kupstas Friend Val KupstasJoin date: August 2011Posts: 31Downloads:0Uploads:2 Thanked: 5 times in 5 posts]

#406479

The best would be to change this line here:

margin: -37px 0 -2px 351px;

Into this here:

margin: -37px auto -2px auto;

And DO NOT add the right:198px;/*set pixel as per reqiurement*/

As the solution above with add right:198px; would need to be adjusted pr screen resolution and will not work out in the long run.

1 user says Thank You to Val Kupstas for this useful post

1. benteveo

[benteveo Friend benteveoJoin date: December 2010Posts: 25Downloads:0Uploads:2 Thanks: 4]

#406716

Thanks to both of you for answering!

And SPECIAL thanks to Val Kupstas because that worked great!

[Author]

Posts