Store Community Support Documentation

Hello.

I just opened my phpfox website on my phone. The main page image looks good for the desktop- and tablet version, but on phones it looks twinkie, see screenshot. I tried several image sizes, e.g. 1600 x 1200, 1600 x 1600, 1920 x 1440..., but none solved this problem. How can I make my website looking good on phones? Do I have to adjust some CSS or HTML somewhere?

Thanks,

Mathias

Last update on March 3, 2:34 pm by snick3rs.
Vivian
#1

Hello.

I just opened my phpfox website on my phone. The main page image looks good for the desktop- and tablet version, but on phones it looks twinkie, see screenshot. I tried several image sizes, e.g. 1600 x 1200, 1600 x 1600, 1920 x 1440..., but none solved this problem. How can I make my website looking good on phones? Do I have to adjust some CSS or HTML somewhere?

Thanks,

Mathias

Hi snick3rs,

Can you reproduce this issue on phpFox demo site (v4.phpfox.com)?

#2

Hello Vivian,

yes, I can reproduce on your demo.

The problem is, that the background image repeats itself. I just would like to know how I can add "background-repeat: no-repeat;" in the CSS or HTML section, so that there is only one background image not repeating.

Also I would like to know how to change the meta-tag "robots" to "index, nofollow".

Thanks.

Greetings,

Mathias

JohnJr
#3

Mathias, this is out the theme is set up and it not repeating it is taking the image above and making a background image with a background size of cover and blurred.  Did you want no background or a specific color?  What do you want for a background?

JohnJr
#4

If you want the background color black you could override by putting this in the admincp CSS editor at the bottom of the code

body#page_core_index-visitor .landing-background::after {
    background-color: black;
}

if you want mobile only I think you have to put @media screen and (max-width: 767px) in front of it.

media screen and (max-width: 767px){

body#page_core_index-visitor .landing-background::after {

    background-color: black;
}

}

Last update on February 14, 4:46 pm by JohnJr.
#5

Hello JohnJR,

thanks a lot. This is working for my smartphone, but not for the tablet (Asus Nexus 7). There I have only a black background without the image (bass guitar). Any other idea? PhpFox-Team, do you read the forum entries?

Greetings,

Mathias

JohnJr
#6

If you use the top CSS the black will be for all devices or you could set it up to like (max-width: 1281px) because that tablet is 1280 x 800

Last update on February 14, 5:53 pm by JohnJr.
JohnJr
#7

Oh...no guitar image...let me check that out.

 

JohnJr
#8

Seems to work on my site.  Change the max width and try it again :)

#9

Still not working :-(

How exactly does the code have to look like?

This is mine:

body#page_core_index-visitor .landing-background::after {

    background-color:rgb(0,0,0);
}
@media (max-width: 1281px) {
body#page_core_index-visitor .landing-background::after {
    background-color:rgb(0,0,0);
    }
}

See Screenshot

Greetings,

Mathias

Attachments
metalists.png 38.02 Kb . 2 Views
JohnJr
#10

Your funny...it was either or not both pieces of code :)

I put this between the two pieces of code.

if you want mobile only I think you have to put @media screen and (max-width: 767px) in front of it.

Although now that I think about it...it should work anyways.

Private message me you're website if you want and I can check it out on firefox.