Bazish
|
Facing same kind of issue.. all works perfectly for the Art v4 Responsive but header image/logo issue is still there...
for your site, try these.
Open your style.responsive.css
make min-height to 120px on the following rule (search in the file for .responsive .freebusinesswebsites-header and you will jump to the line no 94.
.responsive .freebusinesswebsites-header { background-position: center center !important; background-repeat: repeat !important; background-size: cover !important; height: auto; min-height: 120px; width: auto; }
then again look for the same css rule, you will jump to line around 473, make it look like this
.responsive .freebusinesswebsites-header { background-image: url("images/object1164993663.png"); background-position: center center; }
it will show up your header image, i can see it works on few devices okay and on few devices/resolution it cuts the image.... but at least this way you will get your header to appear.
|
| |
Pekka M
|
I make the header-image seen also in responsive design (viewing in mobile) only changing the css in style-responsive.css file:
.responsive .nlr-header #nlr-flash-area,
.responsive .nlr-header .nlr-shapes>*
{
display: block; (was:none)
max-width:100%: (i add this)
}
|
| |
Stewart
|
Thank you, but its is already too complicated for me, and I shouldn't have to be playing with css code if Artisteer actually stuck to their sales message stated clearly on their homepage:
"No need to learn Photoshop, CSS, HTML or other technologies"
That was the main selling point for me. Until they've fixed this, I'm going back to using my mobile website builder and building separate mobile sites, at least that way, I can control the way the site looks.
Will also mean sticking to Artisteer V3. Have to spend some time reverting the sites back, hopefully that will work.
Artisteer team, if you're reading this. the mobile responsiveness is not working correctly. I think enough has been said on the topic to warrant it a as a major issue.
Not everyone is good at editing css code and shouldn't have to according to your sales message.
Please give it priority and fix this issue.
Thanks you.
|
| |
Stewart
|
What in the world has that got to with the price of fish?
|
| |
Wowzer
|
It has everything to do with the price of fish.
You want to sell your clients fish. The problem is you want to open a can to get the product instead of catching the fish yourself.
You would rather have someone else do all the work so you can pass your crappy canned fish off as fresh. The customer will eventually figure out that they can get fresh fish instead of the canned fish they are being served.
|
| |
Stewart
|
Thanks for all the useful tips, all taken onboard
|
| |
Happy Camper
|
I also see this problem w/ artiseer 4 WP themes on iPhone. I don't understand why this thread like many others in this forum de-volve so quickly into snarky arguements, as opposed to folks sincerely trying to help each other w/ contructive info....kinda sad.
|
| |
Tina
|
Thank you so much Pekka M.
I've been searching for days to find a solution to my header not displaying on the iphone. But I have to say that this solution works only when you have only one image in the header. If you have inserted several images, it does not work.
But thank you for being so helpful. Shame that others feel the need to judge.
|
| |
Stewart
|
This is the answer I recieved from Artisteer support. Maybe it will help others having the same or simialr issues...
====
Hello
This is behavior by design.
Artisteer does not support header objects on responsive layout.
As a workaround you can add the following code to the exported style.css file:
.responsive .freebusinesswebsites-header
{
background-image: url("images/object1164993663.png");
background-size: 100% 100% !important;
}
Please note that the image squeeze may cause a loss of image quality.
|
| |
Stewart
|
Thanks ever so much Richard. Your feedback is thorough to say the least, really appreciate it and I'm sure it will will help other Artisteer users.
I'll search out your prior tips on this and see if I can understand and implement them too. I'm more of a visual learner and usually need screenshots and or videos, but we'll see how it goes.
Thanks again
|
| |
JeffK
|
To fix the problem Artisteer support told me to turn off responsive design. I responded that is not a solution. 
The above solved my problem. It is a shame that the solution was mixed in with off topic flames.
I just changed the responsive template css to the following (as stated above)
.responsive .art-header #art-flash-area,
.responsive .art-header .art-shapes>*
{
display: block;
max-width:100%:
}
|
| |
dave
|
Quote Wowzer:
It has everything to do with the price of fish.
You want to sell your clients fish. The problem is you want to open a can to get the product instead of catching the fish yourself.
You would rather have someone else do all the work so you can pass your crappy canned fish off as fresh. The customer will eventually figure out that they can get fresh fish instead of the canned fish they are being served.
I tend to agree with the sentiment of this response, if not necessarily the tone.
As a professional web developer and designer (meaning I see it as a craft that I love and take pride in), I began studying HTML about a decade ago, then went into Javascript and some CSS so that I could start creating (at least) basic websites and then start studying different graphics programs. I wanted to dedicate myself to an artform, a form of creative expression that I knew one day could earn me money, even if only as a part-time job.
Not knowing HTML or Javascript and at least some basic CSS is like telling a professional wrestler that you want to be the next Rock or Stone Cold but don't really have time to get in shape or learn the holds.
I try to be empathic and caring, but I also meet clients every day, literally, from coffee shops to my WordPress classes, who tell me about "developers" who sell them Headway/Thesis/Genesis template knock-offs and then take off the minute they're paid and can't tell them how to manage their site because the "developers" don't know enough WP to make any changes - just that one generic set up.
If you make money as a WP web developer, take pride in what you're doing, see it as a craft and focus on doing the most beautiful, detailed work you can and being able to truly help your clients - that way you'll enjoy what you're doing more and you'll want to spend the time to be the best you can at this.
|
| |
Danner
|
I still don't get why artisteer can't fix this issue or at least give us some options to design a mobile version as well :D just my 2 cents. we all do pay to have the ease of designing templates without having to do any coding but if we are forced to code to fix a prob because artisteer won't fix it then whats the point of using artisteer we might as well learn code and do it all from scratch. but were all lazy and rather use artisteer. in conclusion artisteer should fix the issue or give us options and as a web designer i am not afraid to play with code to get it to work but it should be a temporary fix not a solution to the issue so they don't have to deal with it.
|
| |
mark
|
i have been having problems with my header on mobiles, so i did a test with the wordpress twenty twelve theme that comes with wordpress.
i used the exact same logo image as i am using with my artisteer site and it works with twenty twelve but not with artisteer, how come?
The exact same image and text, no alterations.
|
| |
Phil Gebhardt
|
Quote Bazish:
Facing same kind of issue.. all works perfectly for the Art v4 Responsive but header image/logo issue is still there...
for your site, try these.
Open your style.responsive.css
make min-height to 120px on the following rule (search in the file for .responsive .freebusinesswebsites-header and you will jump to the line no 94.
.responsive .freebusinesswebsites-header { background-position: center center !important; background-repeat: repeat !important; background-size: cover !important; height: auto; min-height: 120px; width: auto; }
then again look for the same css rule, you will jump to line around 473, make it look like this
.responsive .freebusinesswebsites-header { background-image: url("images/object1164993663.png"); background-position: center center; }
it will show up your header image, i can see it works on few devices okay and on few devices/resolution it cuts the image.... but at least this way you will get your header to appear.
Nice one Bazish for pointing me in the right direction. Apparently there's a fair few ways of doing this (I've seen using jquery I think) but I've developed your idea and implemented the code using media queries-this allows you to style conditionally for different viewing sizes. My Original header at 940x160px looked awful when scrunched up to 320x480 (samsung galaxy & iphone4 size) so I had a brainwave-I designed a different header (much smaller initially 550x160) but when scaled down looks fine and then used the media queries to call on different header images
Here's the complete code:
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
.responsive .header
{
/*width: auto;*/
/*height: auto;*/
max-width:320px;
background-size: cover !important;
background-repeat: repeat !important;
background-image: url("images/Mobile-Portrait-Header.png"); background-position: center left;
}
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
.responsive .header
{
width: auto;
height: auto;
max-width:568px;
background-repeat: repeat !important;
background-image: url("images/Mobile-Portrait-Header.png"); background-position: center left;
}
}
/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (orientation : portrait) {
.responsive .header
{
width: auto;
height: auto;
max-width:768px;
min-height:120px;
background-position: center center !important;
background-size: cover !important;
background-repeat: repeat !important;
background-image: url("images/header.png"); background-position: center left;
}
}
so the css code for the smartphone calls on a header image called 'Mobile-Portrait- Image.png' (I used the same image for landscape view) and the css code for the ipad calls on another image ( header.png)
check out the results http://bekskitesurfing.co.uk and look on desktop,ipad and smartphone
Hope this helps-if anyone needs further clarification please feel free to email me
Kind Regards
Phil
|
| |
Mark t
|
hello Philip
I followed your style sheet and my image for mobile is not showing, only my original pc header that's being squashed to fit a mobile. ( samsung galaxy ace )
Where are you adding this style sheet? I put it in the additional css box in artisteer, but it's ignored. i added it to the bottom of the responsive css on my site and then the top of my responsive style sheet inside wordpress and still that didn't work.
I even named my images the same as your example.
Mark
|
| |
Pedro
|
Just tried Philip's seemingly thorough solution, dropped it into the css (the complete code with appropriate image name changes), and it isn't doing anything. Could it be the other @media entries conflicting?
Currently they show:
@media all and (max-width: 1200px)
{
#art-resp, #art-resp-t { display: block; }
#art-resp-m { display: none; }
}
@media all and (max-width: 480px)
{
#art-resp, #art-resp-m { display: block; }
#art-resp-t { display: none; }
Or is there more to this that I'm missing?
|
| |
Alejandro
|
Hello, i would like to know if there is a way to control when the responsive must be activated and when not. I mean, i would like to turn the site responsive just when you use an screen smaller than 480xp because when you see the site from an ipad in 768px for example, the site Go to responsive. Is there a way to keep the original size and not going to responsive when 768px?
Thanks!
I'm sorry for My bad english!! :)
|
| |
Dave
|
Quote Phil Gebhardt:
Quote Bazish:
Facing same kind of issue.. all works perfectly for the Art v4 Responsive but header image/logo issue is still there...
for your site, try these.
Open your style.responsive.css
make min-height to 120px on the following rule (search in the file for .responsive .freebusinesswebsites-header and you will jump to the line no 94.
Phil,
What if you copied and pasted this into virtually any Artisteer theme in the header? I'm obviously not a CSS guy (I focus on WordPress, design, and project management), but I'm wondering if this would adapt well to most themes using headers that might not be mobile-friendly out of the box??
.responsive .freebusinesswebsites-header { background-position: center center !important; background-repeat: repeat !important; background-size: cover !important; height: auto; min-height: 120px; width: auto; }
then again look for the same css rule, you will jump to line around 473, make it look like this
.responsive .freebusinesswebsites-header { background-image: url("images/object1164993663.png"); background-position: center center; }
it will show up your header image, i can see it works on few devices okay and on few devices/resolution it cuts the image.... but at least this way you will get your header to appear.
Nice one Bazish for pointing me in the right direction. Apparently there's a fair few ways of doing this (I've seen using jquery I think) but I've developed your idea and implemented the code using media queries-this allows you to style conditionally for different viewing sizes. My Original header at 940x160px looked awful when scrunched up to 320x480 (samsung galaxy & iphone4 size) so I had a brainwave-I designed a different header (much smaller initially 550x160) but when scaled down looks fine and then used the media queries to call on different header images
Here's the complete code:
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
.responsive .header
{
/*width: auto;*/
/*height: auto;*/
max-width:320px;
background-size: cover !important;
background-repeat: repeat !important;
background-image: url("images/Mobile-Portrait-Header.png"); background-position: center left;
}
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
.responsive .header
{
width: auto;
height: auto;
max-width:568px;
background-repeat: repeat !important;
background-image: url("images/Mobile-Portrait-Header.png"); background-position: center left;
}
}
/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (orientation : portrait) {
.responsive .header
{
width: auto;
height: auto;
max-width:768px;
min-height:120px;
background-position: center center !important;
background-size: cover !important;
background-repeat: repeat !important;
background-image: url("images/header.png"); background-position: center left;
}
}
so the css code for the smartphone calls on a header image called 'Mobile-Portrait- Image.png' (I used the same image for landscape view) and the css code for the ipad calls on another image ( header.png)
check out the results http://bekskitesurfing.co.uk and look on desktop,ipad and smartphone
Hope this helps-if anyone needs further clarification please feel free to email me
Kind Regards
Phil
|
| |
Dave
|
Quote Bazish:
Facing same kind of issue.. all works perfectly for the Art v4 Responsive but header image/logo issue is still there...
for your site, try these.
Open your style.responsive.css
make min-height to 120px on the following rule (search in the file for .responsive .freebusinesswebsites-header and you will jump to the line no 94.
.responsive .freebusinesswebsites-header { background-position: center center !important; background-repeat: repeat !important; background-size: cover !important; height: auto; min-height: 120px; width: auto; }
then again look for the same css rule, you will jump to line around 473, make it look like this
.responsive .freebusinesswebsites-header { background-image: url("images/object1164993663.png"); background-position: center center; }
it will show up your header image, i can see it works on few devices okay and on few devices/resolution it cuts the image.... but at least this way you will get your header to appear.
I would also add that I sometimes use a plugin called Any Mobile Theme switcher that works most of the time by detecting mobile devices and then switching them to the generic 2012 WP theme or something else.
|
| |
dave
|
Quote Wowzer:
It has everything to do with the price of fish.
You want to sell your clients fish. The problem is you want to open a can to get the product instead of catching the fish yourself.
You would rather have someone else do all the work so you can pass your crappy canned fish off as fresh. The customer will eventually figure out that they can get fresh fish instead of the canned fish they are being served.
In all fairness, I'm not proficient in CSS,but do know HTML fairly well, and never leave a project until the client is completely satisfied with the end professional online presence - mobile sites can never be totally one hundred percent responsive to every single device out there but I make sure the theme/site looks good in most top mobile devices. If I can't tweak it, I'll use a plugin.
|
| |
Dave
|
Quote Stewart:
being as none of you have any idea what my clients actually want and how much I charge, let me shed some light.
I provide a free web design service, don't get a penny for it. All i get is a hosting and maintenance fee. That is my business model. it helps small business owners in my community get online without having to pay the web design fees you are all insinuating that I'm taking.
Operating such a business model means I must have a system where I can create quick sites without having to invest much time and energy... hence Artisteer, and it fulfilled the role perfectly until this small hiccup with the responsive headers.
Not wanting to spend time learning css and digging into html is part of my business model, not yours, for which I respect every one of them.
In future when I have an issue I'll go straight to support instead of asking in here. I was being clear in my directions cause I know what kind of answers I need. I was highly appreciative of the answers i got, but they did not help because I was seeing something completely different to what was being explained (or I didn't get it).
Anyway, if anyone feels offended, that was not my intention. My apologies. Hopefully this will put an end to this and everyone can carry on with their lives as they were before i arrived and made such an entry.
Happy designing.
P.s. Bazis and Pekker M thanks for your answers, much appreciated.
Stewart,
I believe in charity and good will, but I would never work on a professional website for what it costs to buy a bag of cheeseburgers. A professional online presence requires you work with customers on taxonomy, page and site content, making sure every aspect of the site works well before leaving the picture, getting paid realistic industry standards for honest (and often stressful) work done. To work for very low amounts shames those of us who are trying to be professional web developers.
I may not be proficient in CSS, but I do know HTML and what breaks a site or doesn't and admit when I don't know something or will research what is required to fix an issue satisfactorily. I've created at least a dozen sites for paying clients in the last year and they all are still working just fine, most are great-looking on mobile devices (whether I spent twice as long on the theme or used plugins to switch to mobile-ready themes).
I can't ask you to stop doing serious work for a cup of coffee and a handshake, but I can ask you to value the work itself and professionalism required a bit more to ask for livable wages?
|
| |
Karen
|
Stewart,
You can always find someone at places like Fiverr.com to make small changes and customizations for you. I know a lot of consultants who outsource tasks outside their area of expertise.
~Karen
|
| |
Web Developer
|
I stumbled upon this site and had to pipe in on this subject, which is becoming more and more infectious.
This is all i need to say:
GoTo W3 SCHOOLS and learn something. It will be beneficial to your clients and YOU!
It's not that hard.... stop being lazy!
|
| |
Brandon
|
Stewart,
I think it is easily agreed that if you operate a business, you should be able to provide the services you sell - there is a whole industry of "Brokers" who are upfront with their customers that they don't even have a product, they arejust middle men. You - Stewart could partner with a really good designer in your area, never have to learn code - and get paid a better wage but you choose not to and throw it back at other Real World designers and developers who are providing constructive criticism - the Wikipedia definition being "Criticism is the judgement of the merits and faults of the work or actions of one individual by another (the critic)."
Criticism will not always feel good, it is allowing others to judge you on your faults and merits, but not a single person was rude to you and everyone has only offered suggestions to build up your business model and your skills to improve your abilities.
On the other hand, you respond aggressively about how we don't understand (seems like this is more our industry than it is yours, I think we do understand very well, hence the really strong opinions.) your business model (which you never mention until you retaliate.), then continue to complain that you are valid in your squabbles because you take a penance of a paycheck and this is your soapbox.
The part that chaps my hide is when you post a link at the very beginning linking to a client you are having problems with - on whose site you have put a link to your business.
Looking at your business you are totally off-base chastising my fellow compatriots for being too hard on you and how you take no money.
You charge a setup fee, plus monthly fees that are more than what is required to call it "just hosting" and you provide a service to real companies who make real money running their businesses!
How can you feel justified telling all of us that you get no money from real world businesses who have employees and cut paychecks? Do you think a real business has faith in a "poor little me" man who says I can just give you a site for free no cost cause i luvs you?! Get real buddy - No one ( I have tried in building my portfolio) wants a site that is given away for free - there is always a catch - would you buy a car from someone who told you it will only cost you gas, for real, here are the keys go have fun?
It sounds like you want to make money, have no desire to learn skills needed to be good at it, and have a huge issue closing the sale and positioning yourself as an asset to your potential customer instead of a liability.
Get real, close the sale and make a buck.
|
| |
Chewy
|
I am stunned at how petty some of the comments are on this board. Especially the ones directed at Stewart. The truth is that technology is getting way more user friendly, and the days of the mysterious knowledge related to web design are coming to a close. Seems to me like a bunch of know-it-all types with nothing better to do are trolling the Artisteer support blogs and making fun of people. I find it ironic these douchbags are even on the blog site. If they know everything already, why do they need Artisteer?
|
| |
Said Chewy
|
Quote Chewy:
I find it ironic these douchbags are even on the blog site. If they know everything already, why do they need Artisteer?
Said Chewy
|
| |
BIG_FELLA
|
I don't really give a toss what Stewart wants to learn or doesn't want to learn, or if he's making money or not, but he has asked a valid question and it would be good if he just got an answer.
I think that you've been VERY patient actually Stewart, I would have told the fish mungers where to go, well and truly!!!
Anyway, I have a similar issue with the header image in a Joomla template, but I'm losing a bit of the top and a bit of the bottom only when viewed in landscape on an iPad, iPhone 4/4s, iPhone 5 and HTC.........
I fixed everything except the iPhone5 & HTC by adding the following line below:
(WAS)
@media all and (max-width: 799px)
{
#art-resp, #art-resp-t { display: block; }
#art-resp-m { display: none; }
}
@media all and (max-width: 480px)
{
#art-resp, #art-resp-m { display: block; }
#art-resp-t { display: none; }
}
(NOW)
@media all and (max-width: 799px)
and (orientation : landscape)
{
#art-resp, #art-resp-t { display: block; }
#art-resp-m { display: none; }
}
@media all and (max-width: 480px)
{
#art-resp, #art-resp-m { display: block; }
#art-resp-t { display: none; }
}
Now I'm just trying to find the solution for iPhone5 & HTC
Regards,
Pete.
|
| |
Xander
|
Stewart...
To put it bluntly, if you are offering web services to paying clients, you should know basic HTML & CSS. Period.
It's not fair to the clients when something like this happens and you have no idea how to fix it.
What upsets me, is the fact that someone tried to explain to you how to try to fix the issue, and you basically threw your hands up and yelled that it was already too hard...without even trying.
HTML & CSS are not hard at all. Spend a little bit of time and actually educate yourself on the basics of a service you are offering clients. You can find tutorials and training sites free online...it won't cost you a dime. You figured out Artisteer, you can figure out the basics of HTML & CSS.
The fact you have to be told this is...well...sad. If I were your clients, I'd feel like I was being scammed.
|
| |
Juanmi Rodriguez
|
I have a solution for "HTML Export", & maybe others...
1.- rigth click on your logo while are in browser, see the name of the class of your file (in my case "xxx-object302339205")
2.- look in the code of style.css for this name, and find "display: none;"
3.- Comment these line (Example: for "display: none;" write "/*display: none;*/".
4.- Enjoy ;)
|
| |