I’d like to use a custom background image that will look great on every device. This image should be small enough in file size to not hinder load times while large enough to fit on the highest resolution screen available. Hopefully you guys have already figured this out and can give a simple answer similar to this:

1. Optimum Dimensions – 2880×1800
2. Optimum File Size – No more than 100KB

So far, here’s all the info I’ve gathered:

QUESTION: Why doesn’t the background I created look good on my desktop? It looks fine on my laptop?

ANSWER: The background that you created in the IndexPureRide.psd is 1494×1192. I edited that background image to 1920×1192 which works on most displays but if you check the site on an iPhone 5, the height isn’t enough to fit the screen. Along with that, the image has been optimized and is still 607KB. For optimum site loading, we need this number to stay around 100KB. After all, Slower load time = unhappy users = fewer sales…

If we’re ok with having slower load times and still want our site to have a large fixed background, we need to recreate this in order for it to fit nicely on all screen sizes and resolutions. Below is a list of the many resolutions being used today for your reference.

COMPUTER RESOLUTIONS:
13″ MBP 1280×800
13″ MBP (Retna) 2560×1600
15″ MBP (Retna) 2880×1800
21″ iMac 1920×1080
27″ iMac 2560×1440

TABLET RESOLUTIONS:
iPad Mini 768×1024
iPad 2 768×1024
iPad Mini (Retna) 1536×2048
iPad Air 1536×2048
Google Nexus 5 1080×1920
Google Nexus 7 1200×1920
Google Nexus 10 1600×2560

PHONE RESOLUTIONS:
iPhone 4S 640×960
iPhone 5-5S 640×1136
Galaxy S3 720×1280
Galaxy S4 1080×1920
Galaxy Note 3 1080×1920

*1920×1080 is 1.78 to 1 ratio (16×9), as is the currently most common resolution of 1366 x 768.

ALONG WITH THAT, I HAVE THE SECOND EMAIL THAT MAY HELP US FIND THE RIGHT ANSWER:

QUESTION: So, I’m not sure how it works when moving from a full site to mobile but I think the optimized bg works well on a computer. However, it does look strange on mobile devices and I’m not sure how to fix this. Is it possible to create one bg that works for every device while not hurting us regarding load times?

ANSWER: If you check the site on a computer it looks good bc the image is 1920×1192. This is larger than 1920×1080 so our current bg covers most computer and TV resolutions. Here’s where it gets a little complicated.

Lets say you check the site on an iPad mini without a Retna display (768×1024). Everything looks fine bc our image of 1920×1192 will cover the screen both horizontally and vertically with no problem. The issue comes when the resolution gets larger than 1920×1192 in either direction and that’s what we need to address. Based on the resolution chart I created in the previous email, if we create an image that’s 2560 (to cover the width of the 27″ iMac and Google Nexus 10) x 1920 (to cover the height of the Galaxy Note 3), our bg will look good no matter what device you’re using.

*I believe Apple Retna displays such as the 15″ MBP (2880×1800) work a little different but I’m not sure. They use a technology to cram more pixels into the same space making the pixels invisible to the eye. If you open a website with a 1920×1080 bg, it’s not going to open as a small image in the center of the screen. Instead, the image will be displayed as a full image covering the whole screen, it just won’t be as sharp. If this is correct, 2560×1920 will work. If this is incorrect, I believe we need to make it the same as a 15″ MBP (Retna) which is 2880×1800. God I hate this… :)

Also, most websites with full screen bg’s use an image that fades into black or white on all four edges/corners so that once the resolution gets larger than 1920×1080, it doesn’t matter what resolution you’re using, the image stays centered and doesn’t take up hundreds of KB’s slowing down the loading time of the site. In summary, If you could create an image that’s 2560×1920 image where all four edges/corners are black with your splash in the center, this should be optimum. If this is incorrect, I’m going to look for a tall bridge and …

Cheers!

I have been experiencing a ton of 502 Bad Gateway issues with my site recently. I’m not entirely sure why this is happening it, but when it does it just brings up a white bad with:

502 Bad Gateway
———————–
nginx

Do you know why this is happening? I saw a previous topic but it was someone experiencing the issue on an install. My is occurring while I am editing pages periodically.

Thanks in advance!

I found this support thread https://kriesi.at/support/topic/avia-layout-builder-elements-in-posts-comments-are-missing/

That didn’t help my situation though when I used the gist code provided. The only thing that visibly changed was some CSS.

I have a custom content type called download how would I get comments to show on the pages for this content type if I’m using the avia layout builder?

HI.

I made my own social icons for my site here: http://lizybloomdesigns.com/zemasfoods3/

I inserted the code below into custom.css based on information I read in other posts. But when you hover over my images, they move slightly. Is there a way to fix this?

Thanks
Lizy Bloom

#top .social_bookmarks_facebook {
background: url(https://lizybloomdesigns.com/zemasfoods3/wp-content/uploads/social/facebook.png) no-repeat center;
}

#top .social_bookmarks_facebook:hover a {
color:#fff;
background: url(https://lizybloomdesigns.com/zemasfoods3/wp-content/uploads/social/facebook_hover.png) no-repeat center;
}

#top .social_bookmarks_facebook a {
text-indent: -9999px;
}

#top .social_bookmarks_pinterest {
background: url(https://lizybloomdesigns.com/zemasfoods3/wp-content/uploads/social/pinterest.png) no-repeat center;
}

#top .social_bookmarks_pinterest:hover a {
color:#fff;
background: url(https://lizybloomdesigns.com/zemasfoods3/wp-content/uploads/social/pinterest_hover.png) no-repeat center;
}

#top .social_bookmarks_pinterest a {
text-indent: -9999px;
}

#top .social_bookmarks_twitter {
background: url(https://lizybloomdesigns.com/zemasfoods3/wp-content/uploads/social/twitter.png) no-repeat center;
}

#top .social_bookmarks_twitter:hover a {
color:#fff;
background: url(https://lizybloomdesigns.com/zemasfoods3/wp-content/uploads/social/twitter_hover.png) no-repeat center;
}

#top .social_bookmarks_twitter a {
text-indent: -9999px;
}

#top .social_bookmarks_linkedin {
background: url(https://lizybloomdesigns.com/zemasfoods3/wp-content/uploads/social/link.png) no-repeat center;
}

#top .social_bookmarks_linkedin:hover a {
color:#fff;
background: url(https://lizybloomdesigns.com/zemasfoods3/wp-content/uploads/social/link_hover.png) no-repeat center;
}

#top .social_bookmarks_linkedin a {
text-indent: -9999px;
}

#top .social_bookmarks {
    height: 35px;
    margin: 0 0 0 900px;
    z-index: 150;
}

Hi

1) I want to change the top small social icon top nav background colour to blue with white text.

2) Also on top main navigation (Home, etc) changing font to Uppercase (HOME, etc) and colour from grey to black

3) The footer second column has all the page references in there what is controlling that..

4) Disabling the scaling on the logo..

5) Can all responsive designs have option – to also view desktop version, if people dont want to view responsive (think that is the way forward both options)