speedyp
|
Decided to apply the responsive 4.1 approach for a new client. Got an OK responsive design together but realised the desktop header & log disappear when in smaller screen mode.
I got around this by creating a new (smaller) logo just for mobiles and added it before the art shapes in sidebar-header.php.
This works but I've noticed an annoying issue. When you refresh the screen or load another page in "mobile" mode, the original desktop header flashes briefly before being hidden.
|
| |
Nick
|
Another (easy) workaround is to upload your logo as the twitter/facebook/RSS image.
Controls-> then choose one of the 3.
Then head on to the header menu, and insert the control. These 3 controls and if you have a search box in the header, are always visible.
|
| |
speedyp
|
Thanks Nick - I'll keep that in mind.
Have you had any experience of the desktop css flashing through when viewing small or on mobile???
|
| |
Nick
|
Just remember that all shapes, slideshows, images, extra text, etc... are not displayed in the responsive views, BUT the background image, any and all controls which includes any positions you created,along with the Headline, the slogan, and search box are always visible.
Come to think about it, If you make your logo part of the background header image, is another way to have it always visible. Just use photoshop, etc... to merge the 2 together.
Now strangely enough, if I put an external slideshow through the header widget (at least with templateer themes), the slideshow is always visible. This causes a problem, since when you resize the screen the slideshow, and the header do not resize the same amount. A quick fix is to use the "visible-desktop" class on the header widget, so the slideshow is only visible for large screens, but for mobile devices, the slideshow is not shown at all, instead they get the default image set within Artisteer. This does not work properly when the header is screen width (1920px). We need to find a solution for this...
For those who are lost, I'll post a video tomorrow, to demonstrate the problem, and my half ass solutions.
|
| |
Jacobrk
|
My sites are usually 960 wide, so what im doing is this. Making an image colored what the header image will be. The image size is 960x150. Then directly centered in it, size up an area of 450x95 and use this as my safe zone for my image. Then apply it as a header background image.
My not be right, but working for what I have needed it.
|
| |
speedyp
|
Quote Nick:
Just remember that all shapes, slideshows, images, extra text, etc... are not displayed in the responsive views, BUT the background image, any and all controls which includes any positions you created,along with the Headline, the slogan, and search box are always visible.
I think this is the heart of my issues. I seem to get the desktop stuff that's supposed to be hidden flashing (very briefly) through
|
| |
dorcha
|
This has been bugging me to no end.
I have a shape as my logo on top of a coloured banner background. Upon shrinking the logo disappears and the banner stays the same.
Adding the following code to the responsive css:
.responsive .art-header {
background-image: url("images/object1879040854.png");
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: contain !important;
height: auto;
min-height: 100px;
min-width: 1%;
width: auto;
}
Make the logo scale down to sie but the background disappears instead. So it it the case that you can only have one or the other?
This theme seems to manage it though:
http://demo.grandpixels.com/?theme=linguini
|
| |
Nick
|
Did you even read some of the possible solutions above?
|
| |
dorcha
|
Yes and thank you, I merged them and it's fine but I still wanted to know if that is a specific limitation.
As Artisteer has the option to export responsive templates I can imagine many people who use both a logo and header logo/shape ( in order to freely move it around whilst coming up with design ideas) scratching their heads as to why one or the other disappears.
|
| |
Nick
|
Use either the RSS, Facebook, or Twitter controls instead...
I am about to post a video tutorial to do that, in a brand new post. Give me 30 minutes or so...
|
| |
imagei
|
Hey guys,
I've posted this out on another thread but might as well spread it around as it's worked for some of the others:
I've just been on to support regarding this same issue. Here's the solution that they came up with which worked well on the site I was working on:
Find the style.responsive.css file and search for the .responsive .art-header class and replace it with the code like this (specify your own image reference no in the background-image: url section):
.responsive .art-header {
background-image: url("images/object1234567809.png");
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: contain !important;
height: auto;
min-height: 100px;
min-width: 1%;
width: auto;
}
Don't just cut and paste this directly in as it has to be adjusted for your image reference. This will only work if it has the correct image name in:
background-image: url("images/object950350315.png");
To find the image url, Firebug the theme and click on the header. Search the css for a url beginning with images/object and copy the line into the above code. In the example it is located in:
.header
I can't guarantee that this will work for you, but it is certainly working for me, see it here: http://www.redjoinery.com
|
| |
imagei
|
Ooops, just seen dorchas post. No Edit/delete facility here.... Grrrrrrrrrrrrrrrrr
|
| |
Damian
|
Whenever i add a transparent shape to my header when my website gets responsive, the shapes have a grey transparent shade!!! how do i remove this? anyhelp?
|
| |
LenW
|
After hours of time, I have a simple fix for a visible website name in the responsive (mobile) format. Create the header graphic with the logo to the left. Then add this css:
.responsive .art-header {
background-position: left center !important;
}
This now looks fine on my SamsungS2.
|
| |