Joomla Templates Club 406,261 posts

[joomlafans Friend joomlafansJoin date: April 2014Posts: 74Downloads:8Uploads:16 Thanks: 32 Thanked: 9 times in 1 posts]

#199461

Hello

The default JA Mitius logo is short, therefor it doesn’t need to resize it self on small devices to be responsive.
after resizing the logo size to full however as explained here, It no longer becomes responsive and shoots far off the grid on smaller devices or if you zoom in. is there any fix to that?

Also, is there a way I could change the black space behind the logo/banner with a small image that repeats itself to fill the entire visible banner space on all sizes?. then I can keep the main logo small as the original JA Mitius logo, and still have the image I intended in the background.

Thank you

[Radonja Djurisic Friend Radonja DjurisicJoin date: September 2014Posts: 316Downloads:180Uploads:113 Thanks: 66 Thanked: 72 times in 15 posts]

#541302

Hello joomlafans

Can u provide us a url to your website so we can take a closer look ?
also if u can use screenshot with explanation what u want to do
will be easier for us to help

Thanks
Tolja

1 user says Thank You to Radonja Djurisic for this useful post

1. alexsmirnov

[joomlafans Friend joomlafansJoin date: April 2014Posts: 74Downloads:8Uploads:16 Thanks: 32 Thanked: 9 times in 1 posts]

#541427

Hello
Please find an example of the resized banner not fully responsive here
just zoom in or use an ipad vertically or on a smaller device.
How can I fix this?

An example of the image-repeat background is attached.
How can I achieve this?

Thank you

---

Attachments:

1. 

[Radonja Djurisic Friend Radonja DjurisicJoin date: September 2014Posts: 316Downloads:180Uploads:113 Thanks: 66 Thanked: 72 times in 15 posts]

#541623

hi there

to make that baner responsive u need to add some code to custom.css
u need to work with @media

here is example
try to add this code in custom.css


.logo-image a {
background-size: 100% 100%;
width: 1070px;
height: 108px;
}
@media (min-width: 1200px) {
.logo-image a {
background-size: 100% 100%;
width: 1070px;
height: 108px;
}
}
@media (min-width: 980px) and (max-width: 1199px) {
.logo-image a {
width: 950px;
height: 96px;
background-size: 100% 100%;
}
}
@media (min-width: 768px) and (max-width: 979px) {
.logo-image a {
width: 755px;
height: 61px;
background-size: 100% 100%;
}
}
@media (min-width: 600px) and (max-width: 767px) {
.logo-image a {
width: 755px;
height: 61px;
background-size: 100% 100%;
}
}
@media (max-width: 599px) {
.logo-image a {
width: 500px;
height: 41px;
background-size: 100% 100%;
}
}


1 user says Thank You to Radonja Djurisic for this useful post

1. joomlafans

[joomlafans Friend joomlafansJoin date: April 2014Posts: 74Downloads:8Uploads:16 Thanks: 32 Thanked: 9 times in 1 posts]

#541728

Hello
This certainly makes the banner more responsive, however on smaller devices or starting at 300% zoom the banner begins to lose its hight ratio all the way to 500% zoom. at 400% zoom the banner is off the grid and no longer responsive.
I added the custom css on the test site here and you can see the above clearly.
Thank you

[fmfame Friend fmfameJoin date: October 2013Posts: 228Downloads:4Uploads:39 Thanks: 8 Thanked: 25 times in 1 posts]

#541760

Hi Joomlafans.

I checked your issue and i am wondering why you use ZOOM IN or ZOOM OUT effect of browser..?
thats not functional to debug problems on your site…

to see responsive quality you only should scale browser window smaller but not zooming..

Hope you understand there are big differences of using browser zooming and the functional responsive design.

But i can help you with your problems but you should provide me with site details. I have to check your custom.css and your compiling of your template etc..

1 user says Thank You to fmfame for this useful post

1. joomlafans

[joomlafans Friend joomlafansJoin date: April 2014Posts: 74Downloads:8Uploads:16 Thanks: 32 Thanked: 9 times in 1 posts]

#541767

Hello.

Thank you for clarifying.
I have PMed you our test site info. the custom.css file is exactly as described above by tolja.

[fmfame Friend fmfameJoin date: October 2013Posts: 228Downloads:4Uploads:39 Thanks: 8 Thanked: 25 times in 1 posts]

#541853

Now i have add few things. check again and let me know

1 user says Thank You to fmfame for this useful post

1. joomlafans

[joomlafans Friend joomlafansJoin date: April 2014Posts: 74Downloads:8Uploads:16 Thanks: 32 Thanked: 9 times in 1 posts]

#542085

Hello

The banner works fine on the test site now. I was able to get the same result on the main site except on one of the small sizes the search bar and social buttons move up to the banner area and block the lower half of the banner image. I only duplicated the Custom.css file. did you modify other files? if so what are they?

Thank you for time and support

[Author]

Posts