Picart
|
My css reads like this:
.art-header
{
-webkit-box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.25);
-moz-box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.25);
box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.25);
margin:0 auto;
height: 150px;
background-image: url('images/object234298832.png'), url('images/header.jpg');
background-position: 124px 27px, 0 0;
background-repeat: no-repeat;
position: relative;
width: 900px;
z-index: auto !important;
}
.responsive .art-header
{
background-image: url('images/header.jpg');
background-position: center center;
}
When I paste in the suggested script:
.responsive .th-header {
background-image: url('images/your-image.jpg');
background-size: contain!important;
}
My header doesn't resize. Not only does the logo disappear in small view but the block disappeared too. So I'm wondering what else needs changing. Any ideas much appreciated.
Pic
|
|
1HourWebsitePro
|
Here is how I solved the problem.
1) locate responsive.css
2) Locate "@media (min-width: 480px) and (max-width: 767px)" and "@media (max-width: 479px)"
3) Using class ".art-shapes" add background image.
4) Upload smaller image if needed.
Resulting in:
#art-resp-phone-landscape { display: block; }
.art-shapes{
background:url('IMAGE URL HERE') no-repeat;
top:-20px;
}
}
@media (max-width: 479px)
{
.art-shapes{
background:url('MAGE URL HERE') no-repeat;
top:-20px;
}
Hope this Helps!
|
|
Loconz
|
I took a different approach to responsive headers
Since its all about the small screen I decided to make two headers.
the first header is the normal header to see on the big screen so I used the import image for that so it will disappear.
Then I loaded a Mini header as a background image so it would show when on smartphones.
Seems to work and although both are similar here, you can see the difference. www.webestate.co.nz
From a business point of view a complicated header can be simplified for smartphone users.
|
|
Gobl3t
|
@Loconz
That idea seems great , so how did you made a mini version of your heather?
|
|
Bryan
|
I still go with this one below.... the reason is that on a full sized page I can have detailed logo with phone numbers...whatever.... but when it gets down to a smartphone, people generally don't want to see detailed headers but a simple logo version helps remind then where they are. Make sure the background logo is covered by the main banner.
Quote Loconz:
I took a different approach to responsive headers
Since its all about the small screen I decided to make two headers.
the first header is the normal header to see on the big screen so I used the import image for that so it will disappear.
Then I loaded a Mini header as a background image so it would show when on smartphones.
Seems to work and although both are similar here, you can see the difference. www.webestate.co.nz
From a business point of view a complicated header can be simplified for smartphone users.
|
|
Adam
|
YOU GUYS ROCK!! Thank you!!
|
|
DACOG
|
My Artisteer made web sliders are corrupt. Please help.
has anyone an idea how to overcome Artisteer - Joomla made template banner from getting corrupt when edited?
|
|
ppeperko
|
The trick is much more simple:
- open your template.css
- look for the following (line 379 according to my template, yours maybe diferent):
.default-responsive .object932826031
{
display: none;
}
- change display: none; into display: block;
- save and if your page is opened, refresh it.
|
|
Stefan
|
Quote Mudstock:
I found a better fix yet. Use controls and image url to place your logo. It will always stay no matter what the device screen size. Not a header sized image of course. Just the logo. example. http://www.seethebottom.com
Logo will always show. and it is done in WYSIWYG .
This is basically because the image url is basically a button that needs to show. Just do not add a link. the # works just fine to keep you where you are.
Try it. Works for me!!!
-Mudstock
This and a little tweak, and it's perfect. I also add in the sidebar-header.php ( for WP ) width="100%" for the image. Inside the <img , not the divs. And now it's perfect. Cheers
|
|
Romana
|
Artisteer itself has the perfect answer!
http://www.artisteer.com/?p=responsive_header
|
|
Bravic
|
How do I get the header responsive ?
This is my Hompage: www.druckstore-grzi.de
Thanks
|
|
Cassandra Saunders
|
Quote boy sapak:
Quote Mudstock:
I found a better fix yet. Use controls and image url to place your logo. It will always stay no matter what the device screen size. Not a header sized image of course. Just the logo. example. http://www.seethebottom.com
Logo will always show. and it is done in WYSIWYG .
This is basically because the image url is basically a button that needs to show. Just do not add a link. the # works just fine to keep you where you are.
Try it. Works for me!!!
-Mudstock
BEST ANSWER HEHEHEHEHE TNX MUAHHH
Where is the image URL and which controls do we use?
|
|
Christie Smith
|
God, I am so mad. I have been trying this for two days and the stupid Artisteer instructions of visible / not visible DO. NOT. WORK. My client is being a big pain about this (probably rightfully so), and I am in the hole $-wise at this point. WTH Artisteer??? why must this be so.dang.hard????
|
|
Alan Marcel
|
This tip saved me, but I added another background image (smaller than normal one).
Quote ppeperko:
The trick is much more simple:
- open your template.css
- look for the following (line 379 according to my template, yours maybe diferent):
.default-responsive .object932826031
{
display: none;
background-image: url('../images/object1477052162-responsive.png'); --> SMALLER IMAGE
}
- change display: none; into display: block;
- save and if your page is opened, refresh it.
|
|