Change Background for mobile view only
-
I like how my background looks on the desktop/tablet view but it does not look good in the mobile view. Is there a way for me to change it?
The blog I need help with is: (visible only to logged in users)
-
-
The background is a picture of our logo. On mobile the picture looks like it is zoomed in on and it doesn’t show the whole logo.
-
Let me guess, this website was done with something like Wix, but uses the WordPress framework? – It looks that way, a plug and play web build site.
I mentioned that because unless someone pays for better themes, the plug and play build designs are not too good and lack professional appearance.So what about your site then?
I looked at it and here is my critique, both desktop appearance and mobile.
Desktop
Logo
It is boxy, its just a JPG, with white background placed over a dark background and does make the site look unprofessional. If you make it a PNG with transparency, then there is a visibility issue because of the colors over the background. The rose color will show poorly over the color background you used.To fix this, make the logo larger, use larger font size for “Love Continues” and make it a PNG with a transparent background. This will hopefully overcome the washed out appearance of the rose color over the same background color because the logo is larger, but better is to get a different background and color and still make the logo larger and PNG as stated and test it.
For the smaller font in the Logo, figure a way to use it, but not in the logo. Such as placing the smaller font as “<h1>” element and place the logo around it somehow. This way you get all the components in the Logo and as a title which the site needs for Google ranking.
Colors
Blend too much into each other, from the background to the elements over the background image. This causes accessibility issues (how viewable is the page). Font color near the point of becoming harder to see or read, especially using the rose color for some text. Part of the issue here is the font you chose, it does not lay the best with the background color. Since the background does change as a person scrolls, the color contrast does get a bit better, but the idea is to be better all the way through.Proper color contrast will resolve that issue, use a different font that shows better and stay with Light color font over dark backgrounds. You can get an idea of color combinations using this tool:
This color tool offers a large variety of abilities to test color combinations with text, get color matches etc. I use it all the time.
You may have to change the background image. That would likely resolve a whole lot. basically the background at the start is what causes the issue.
Background images
These are fixed backgrounds which allows the content to scroll over it. The changing of the background is from the parallax method that changes to another background on scroll.Contact Form
Clicking the contact link on the mobile scrolls me to the contact form, but when I click into one of the field boxes, (name, email, comment area, etc) the background changes from white to dark taupe color. Now comes the most horrible part, when typing in these boxes, I cannot even see the text at all. Is the text invisible?The text color is dark with the background and cannot be seen. You need to change the text color to white please. A person on the site will just click out of your site really quick because of this error.
==Mobile==
Now having said the above about the desktop, that will determine how it translates into a mobile screen. This is where you can have more problems and the above issues increased because a mobile screen is much smaller, including it’s pixel size.I am using a Sony Xperia Z1 Smartphone to view the site. Its screen is not the largest of smartphones, but fits in the average size used by most people.
Logo
Same problem, especially now the smaller text is very hard to see. My suggestion above will fix that or make it better at least.Color
Problem above now increases because of a smaller pixel size and screen.Font size is fine, but harder to read because it looks more washed out. Change the font and keep it white. This because the background color/image just overwhelms the page. This background color does not change on the mobile screen, see below.
When I scroll to “Options”, the font changes. Keep the same main font through-out and only use different font for contrast, like in Header uses. Keep to the max of 3 different fonts that works well together.
Increase this font size for this type of font. This will make it more visible. 1 or 2 points (or pixel size) should do – if you make this font type the main content font.
Get away from the rose color text if you use this background color, it is hard to read and pick out.
Content
Titles are hard to read, change the font.Widen the paragraphs on the screen for mobile. Allow it to fill at least 90% of the width of the screen. This will allow less scrolling and still be readable/viewable.
Background
It scrolls with the page. It is no longer fixed and the parallax effect does not work.Essentially, this can be expected when using scripted effects in the desktop version , not everything works in mobile. Without getting into a lot of work to fix this, either accept this fault as it makes no difference for mobile viewing. The scrolling background is fine, but still change the background color.
The background of your business name on a sheet of stationary (from evolutiondesigners.net?) is nice, but on mobile screens it is huge and can’t tell what the image is. If it was not for viewing the desktop version, I would not be able to tell what it is on a mobile screen.
Reason is the website is not scaling the background properly, let alone not working as a parallax.
To fix this, you will need to create custom CSS to address this issue.
Using “@media” syntax, remove the background for mobile screens and replace it with a solid color or a nice repeating gradient color that will cover the entire background, and allow the background image to be fixed.
The height of this replacement background image for mobile screens should be about 1200px since the portrait height of a smartphone is not very large. The width of the background gradient can be only 10px, its the height that is important since it repeats anyway. and should repeat only for “x”, which looks like this:
background-repeat: repeat-x;
Contact Form
Clicking the contact link on the mobile scrolls me to the contact form, but there is too much text before the form. Reduce the amount of text, be much more brief and this will allow the form to show on the first scroll to the contact area.Color issues is the same as above in the desktop review for this form. With a smaller screen in mobile, there is no way to read anything unless the color of the text input is white and large enough.
==Why did I explain all this?==
Fixing the background to work as it does in the desktop view is not the answer you need. It is more work and requires changes to CSS and even adding a script or two to make the parallax work.This link: http://www.javascriptkit.com/dhtmltutors/parallaxscrolling/page2.shtml
The link should give you an idea of the complexity of the issue of parallax and mobile screens.
Will you be able to fix this if your website setup was like Wix?
Providing the other information above was to give you a different perspective on your website in terms of Desktop to Mobile viewing. People using mobiles are not so much on fancy things on websites, especially when it breaks the site on mobile screens. People are more into getting the info they want fast, so if your site is hard to navigate, scroll, read, understand, etc, people leave fast. Hence the reason for the information above. You have more to resolve for mobile views than just fixing the background issue.
You will need to know how to write CSS and if needed obtain good JavaScript (or write it) to fix some issues if your determined to make the parallax work in mobile screens.
If this is a plug and play website, then it’s framework design may not allow you to go into source coding as the PHP and script files and use custom CSS (as with Jetpack). If this is so, you cannot do any of those things other than redo the site to work both in Desktop and mobile, which means changing all content as images and backgrounds etc.
Hope that helps.
-
Forgot to add.
Test, test, test.
Always test what you do to see if it works and is visible, etc, especially on mobile screens. It is clear you did not test very much if at all, because of the contact form, that problem would have been already fixed.
-
@mwarbinek I appreciate the analysis. But the site is very much incomplete, it is not active right now, and has not been fine tuned. Obviously. I really was just wondering if the mobile display could be changed without changing the desktop view. Just a general question.
-
It is up to you what you want to do. My input was from an experienced position, where I build websites for businesses for a living.
Yes I gave more than what the single question asked for. When looking at the site, there were more issues to deal with than just the background, especially the contact form issue.
Based on what I said, the mobile view can be changed and should be changed with all the other issues addressed if you expect business at that website.
So for free, you received professional advice, you can take it and use it to do a better job or ignore it because it did not serve your initial intent. It is up to you. You would be surprised how many times I had to change my idea of things when someone with experience provided help.
Hope it works out.
-
I very much appreciate your critic. But I feel like you were a little condescending towards the site. Acting as if it were a finished site. It is not finished. It is very basic at the moment. I posted the question looking for an answer. I will be making many changes to the site before it goes public. Thanks again.
-
Based on what I see thus far, it appears your close to finishing and by your reaction here, what the site looks like so far is what it will look like at the finish point.
Since you only asked for a fix to make the background work in mobile, that tells me you have pretty much decided the site will remain much the same. When you said you like the background and I said it does not work well with the site creating mobile issues, that certainly did not wash well with you.
I will certainly take a look after time passes to see if you really made a good change or stayed with the current design as is.
All the best.
-
I didn’t come on here to argue haha. I’m not sure why you are assuming so much about me and my site. Yes. I will be making changes. And if it was the Happiness Engineer that said the background didn’t work I would change it too. I’m very open to changing the site. That’s why I said its not finished.
-
No one comes to argue, not even the ones who give you help and information, so why do you debate with them?
Maybe you should go and speak to the happiness engineer instead.
By the way, I build WordPress sites and even write/modify scripts like PHP.
All the best.
-
@lovecontinuesllc, due to the nature of Pique and how things are structured, images such as the one you have as featured in the Common Options page are virtually impossible to size so that they cover the entire area of that panel and and keep the logo visible on all screens. We can resize the image so that it shows on mobile, but you will end up with a lot of area in that panel around the image that will be blank. Also, when it is resized to fit, the logo hides behind one of the images in the content area of that panel. You can try the following and see what I mean.
@media screen and (max-width: 600px) { .post-2 .pique-panel-background { background-size: auto 30%; background-position: center top; } }
- The topic ‘Change Background for mobile view only’ is closed to new replies.
WordPress.com Forums 