[Dona]

Hey Sakin, The website looks fine on the computer – but on mobile devices it is completely messed up. Photos are in the wrong places, etc. http://www.HigherHealthllc.com. Can you please let us know what the fix is please? Thanks so much!

[Sakin]

@Dona: I check in your site from mobile device and it’s working fine. Can you explain which photo are you talking about. Maybe you can share screenshot.

[Dona]

Thanks Sakin,
It is on the Products page. The side photo takes up the entire screen – then the words and the other images are all the way at the bottom of the page. Please check the products page on the web – and compare to the mobile. Needs to look the same. Please let me know how to send you a screen shot if you still need to see it. Thanks so much as always!

[Sakin]

@Dona: That is because of your large image. You should be adding that image as background not as long large image.

[Dona]

Hi Sakin,
I only have that image on the products page because I use it to show the products. When I add “background image” it adds a picture to the website OUTSIDE of the area where it is now. And it is not a global change on the whole website – only want that image on this page. Please look at the website and then let me know what to do to make it work on the mobile please. What you recommend above is not working for me… but I’m sure you know how! 🙂 Thanks so much Sakin!

[Sakin]

@Dona: If you cannot make it as background then you can make that image width 20% always. Like adding in the following css in “Appearance => Theme Options => Custom CSS” box:

.page-id-85 .wp-image-73 { width: 20%; }

[Dona]

Thanks Sakin… that helped a little but didn’t correct the problem. Is there a way to make that a background image on the page itself… where the white space is that we add the text? (not on the background on the sides of the website). Thanks Sakin!

[Sakin]

@Dona: For background you can use

.page-id-85 .entry-content { 
    background: url("http://higherhealthllc.com/wp-content/uploads/2015/04/webproducts-sidebar3-e1427937975312.png") no-repeat scroll 0 0 transparent;
}

[Dona]

Hey Sakin,
As always… thank you. Sadly it didn’t work. Not sure if how it is spaced in your response makes a difference… any other suggestions? Thanks again

[Sakin]

@Dona: I already gave you the way to add background in particular page content. For more you might need to hire developer.

[Dona]

Thanks Sakin. I appreciate it…. but it didn’t work. That’s why I was wondering if you had any other suggestions. I appreciate your help so much!

[Sakin]

@Dona: Can you let me know what is the issue with the 2 different type of CSS I gave you. Do you have any specific design on this.

[Dona]

Hello and thank you for not giving up on me.
I first applied the CSS code you gave me to reduce image to 20%, but didn’t have success with it…however, I understood what you meant so I reduced the the image width and it kept the text next to the image when in Mobile view. the text does not align with any of the product images though.
Next we applied the CSS code you gave me to make that image a background, but it does not seem to work? I also wonder what will happen even if I make it a background, will I be able to place my product images on top of it or text only? Either way, it would be great to have a Page specific background for the products to appear more clearly against. thanks, so very much!

[Sakin]

@Dona: Ok I think I understand your requirement. For that you need to add in Responsive columns plugin and then break image into 5 different images for each product. Then you can add image in the left and description in the right. This is only option I see.

[Dona]

Thank you, I already anticipated your response and have done that.
I still would love it if I can have a background image that I can place my product images on top of if that is possible. The CSS code for background image you gave me I could not get to work?
Exhausted in learning and in Gratitude for you assistance!

[Sakin]

@Dona: You mean only in mobile devices, right? If so then you can add the following css in “Appearance => Theme Options => Custom CSS” box:

@media screen and (max-width: 767px) {
    .page-id-277 #content .alignleft {
        display: block;
        float: none;
        margin: 0 auto;
        max-width: 217px;
        width: 100%;
    }
}

[Dona]

Hi,
I would like to have the background image on all screens including responsive.
I put the code in and didn’t get any changes. Where do I enter the information for the background image?
thanks Sakin!

[Sakin]

@Dona: You have added in wrong CSS. I told you to add in

@media screen and (max-width: 767px) {
    .page-id-277 #content .alignleft {
        display: block;
        float: none;
        margin: 0 auto;
        max-width: 217px;
        width: 100%;
    }
}

But why did you add in with image:

@media screen and (max-width: 767px) {
    .page-id-277 http://higherhealthllc.com/wp-content/uploads/2015/03/productsbackground-copy.png .alignleft {
        display: block;
        float: none;
        margin: 0 auto;
        max-width: 217px;
        width: 100%;
    }
}

[Dona]

Thanks for pointing that out. I did that in one of many attempts to see if I could get the background to display, but could not. I put the CSS code just as you have it and don’t get the background to display. So, that is why I was asking where in the code the path to the specific image is?
Thank you again.

[Sakin]

@Dona: You already have image and now for background, you can check the following css:

.page-id-277 .container {
    background: url("Your-image-url") no-repeat scroll 0 0 transparent;
}

Note: Sorry for the late reply as we are still in state of emergency due to massive earthquake in Nepal. Internet, electricity, water and sanitation are huge problem here. We are also helping others in the community so we are slowing getting back online.

[Author]

Posts