[Gandt]

Tmgale, the issue is simple, your site-container div has no css. Given that its a containing or wrapping div (in terms of its role or purpose), it is missing some key lines of css to make everything work perfectly. Add this to your css stylesheet:

.site-container {
width: 100%;
overflow: hidden;
}

and voila!, problem solved.

G

[Gandt]

Crissy, to make that area transparent, all you need to do is get rid of its background colour and change it for transparent. Currently, you have this:

.nav-primary {
width: 100%;
background-color: #292c33;
background-color: rgba(41, 44, 51, 0.9);

Remove both background colour rules and replace them with:

background:transparent;

So that the resulting css for .nav-primary looks like:

.nav-primary {
width: 100%;
background:transparent;

(or get rid of the background rules entirely, assuming you have no other leftover css styles that can override this)

My recommendation is simply to state it as you want it to be.

[Gandt]

This reply has been marked as private.

[Gandt]

Possible solutions:

I'd try the plugins listed here:

https://wordpress.org/plugins/search.php?q=flash

There's a big list so one of them has to do the trick.
I'd change the sort by filter to 'newest' to make sure you get only those that are current/up to date.

One in particular caught my attention:

https://wordpress.org/plugins/wp-flash-player/faq/

Their demo can be found here:

http://www.apptha-demo.com/wp_product_demo/

But it's compatibility with Genesis is anyone's guess. Worth a try though.

Cheers
G

[Gandt]

If you post a link to the live site I can look into it. With just the snapshots, there's not enough info to troubleshoot this (at least not for me).

G

[Gandt]

Kamakura, for retina-displays you need to have a dpi (dots per inch resolution value) of at least 300.
Most programs, illustrator and fireworks for example, have a default dpi of 72 when you make a new document.
When you saved your jpg (or even made your new illustrator document, did you make sure the value was at least 300?).

Or, when you saved the JPG, what compression option did you go for?

Assuming you took care of the 300dpi, the next possible culprit is the compression method/options.
I suggest you save the JPG with 100% quality (0% compression) then go to:

compressor.io

And try lossy or lossless depending on your need for the finest free compression out there.

Hope this helps
G

[Gandt]

Please post a link to the site and I'll be happy to troubleshoot this for you.
You can do it via a private reply if you deem it fit, either way I'm willing to help.

G

[Gandt]

Brant

The problem is that the background is not getting resized as the width of the device narrows.
Even if you were to align it to the left, the issue would be the same. Align right would fix it partially but I have something better for you:

What you first need to do is use the css background rule. It gives you much more flexibility when it comes to handling what you do with an image than if you just add it directly to the markup.

If for whatever reason you cannot remove it from the backstretch container it is under, just add this custom css line to your primary stylesheet:

.backstretch img {display:none;}

(I personally would remove the entire backstretch element entirely, it is useless)

The next issue you're up against is that the navbar area ( the <header> element and all it contains ) takes more space (out of the screen's totality) as you go down in screen width (when you move from 1024px or higher to 1023px or lower) so that, even resizing the background size doesn't cover you entirely when you go down to the lowest resolutions.

This means that, the background image, if you want it to appear notoriously throughout all resolutions, has to be added to the element that follows the nav area, which in this case is:

.site-container

So, to said .site-container class you add the following css rules:

.site-container {
background: url(http://181.224.137.164/~bcreated/docrockdds.com/wp-content/uploads/2015/02/ames_dentist.jpg) no-repeat fixed center top transparent;
background-size: 100% auto;
padding-top:108px;
}

I use 'fixed' instead of 'scroll' in background to make sure the image stays put and doesn't go anywhere as you scroll, which I believe was the originally intended approach. (Do correct me if I am mistaken)

I then use background-size 100% auto to make sure that the image resizes proportionately to the width of the screen regardless of its width.

I changed padding-top to 108px (you had 120px) because there was an excess of padding, 108 matches the exact size the navbar + its bottom border are taking up.

The only missing piece in this whole fix is the problem caused by the changing nav area's height ( the <header> element and all it contains ) depending on your 1023/1024px screen width.

So, we are going to modify our original css rule for the background image when this happen to adapt to the increased <header> height. Looking through your css, I found the key media query:

@media only screen and (max-width: 1023px) {

So, under this media query, you have this:

.site-container {
	padding-top: 105px;
}

Which we change into this:

.site-container {
padding-top:0;
background-position:center 265px;
}

Padding-top:0 because it only pushes your content further down and because it has no effect over the position of the bg image.
Background position center 265px because center (horizontal center) and 265px because that is the height of your navbar area ( the <header> element and all it contains )

The image now performs as you wanted, BUT, there are still some issues I came across:

1.- You need to modify your intro content (via your queries) to make sure it adapts properly. It did fine for wide resolutions but as we got closer to the smallest ones, it was just too big and was sucked in by the <header> element. You need to add proper padding wherever you deem relevant depending on the kind of look you're after.

2.- If you resize your window's width from 1200+ down to 300'ish, you will notice that, across the way, there are certain breaking points in the design that need to be addressed.

3.- For the smallest resolution, if you want to be able to see the couple...take in mind that takes resizing, and when that happens, the image's height is reduced too, which means, after only a few pixels, it ceases to cover the entire background of the page as it did with the higher resolutions.

I hope this helps.
If you have any doubts, don't hesitate to ask again.

Regards
Gandt

[Gandt]

Victor

I am sorry you find the idea of changing certain aspects of the html structure such an unnecessary hassle.

However, the benefits of such minute changes are more than worth the bother for me:

1.- Less css for greater changes
2.- Simpler css for responsiveness
3.- Reusable html+css base for practically anything theme-related.

After 8 years of coding sites from scratch, both html and css, I figured, if the point of WordPress and Genesis is to optimize production speed and save you the real hassle of doing everything from zero when you can just automate steps, then why not apply the same logic to an html structure I feel I could improve?

Genesis is much more than .inner or #content-sidebar-wrap, so let us not over-react.

Having said that, any pointers towards locating the files that generate said output would be greatly appreciated.

Gandt

[Author]

Posts