[keithmoore43]

I appreciate the response, Victor.

When I use "background-size: cover;" for this particular @media screen, I get a header that's cut off, and looking a bit oversized and pixalated. When I use "background-size: contain" I get the original header image fitting within my iPhone screen, but it doesn't extend to the edges of the screen like the desktop version does.

Also, both options reveal the original green border underneath the header image--and when it's set to "contain" I get a larger green padding area underneath the image even if I set the padding to zero.

So...do I need to set my background AREA differently in mobile so the image knows where to fit?

[keithmoore43]

Going to bump this and see if there are any other ideas to pursue. I understand I need to change the CSS related to my media queries, but I'm not sure what to change. Do I need to create resized images for each one? Setting width: 100%; doesn't work.

For starters I just want to get the header image on the iPhone to look the same as the desktop. So I'd be modifying "@media only screen and (max-width: 800px)" correct?

[keithmoore43]

OK, the image now stretches out on different monitors. Thanks!

But on mobile screens it only uses a fraction of the image. Do I need to fix this under @media in the CSS section?

Didn't realize the can of worms I opened with all this stuff going out of whack on different screens. I still gotta figure out why the widget and main body areas are so far apart as well...

[keithmoore43]

Figured out some of my issues, so I thought I'd explain how I solved them in case anyone searches these threads.

1. Broken pages were the result of my old website folders mixed in the home directory with the new ones (don't ask...) My "about" page was broken because the old site had an about page that I suspect WordPress was trying to load first--except it wasn't a WordPress site. Removing those old pages fixed the problem.

2. My banner image disappeared because the link in my style.css was pointing to the original subdomain instead of the current domain. Fixed.

[keithmoore43]

Thanks for the response! I can handle that, but what about the broken pages? How do I get those to show up?

[keithmoore43]

Great, thanks Victor! I got this change to work, but I'd like to have breadcrumbs on the left whether there is a content area on the left or a sidebar. Any guidance on how to do this? I've seen a few articles on creating if/then statements in php to remove breadcrumbs from certain pages, wondering if something similar could be created to put them on the left regardless of what's beneath them.

I suppose I could just keep the layout the same on every page, but I want to see if I can figure this out first...

[keithmoore43]

OK, so I've gotten Genesis and the sample child theme up and running. The confusion is in how to get my database into the equation. I'll check out one of the plugins. Thanks!

[keithmoore43]

Hmm...not quite there yet. I got Genesis and the Genesis sample theme onto my subdomain, but it's all the basic stuff, none of my customizations. Would be great if I were starting from scratch, but I gotta get my work over here.

MAMP creates a folder called htdocs, and my dev site is a folder under that which contains all the WP files related to my site: wp-content, index.php, wp-admin, etc. Zipping those up into a folder doesn't work. Anyone have tips or perhaps a link explaining how to complete this? Feel like I'm at least halfway there.

Always appreciate the help...

[keithmoore43]

Yeah, I might end up doing that, but I wanted to see if I could do it without adding a plugin. Save resources & stuff.

Thanks!

[keithmoore43]

Reviving an issue I never resolved...school got in the way! Here's an image:

Much appreciated.

Keith

[keithmoore43]

Looks like it's loading, as I see this in the head: <script type='text/javascript' src='http://localhost:8888/keith-moore.net/wp-content/themes/genesis-sample/js/modernizr.custom.js?ver=1.0.0'></script>

The difference is the addition of the ?ver=1.0.0 at the end of the file. Does that matter?

[keithmoore43]

Hmm, not sure if I'm on track yet.

I created a new js folder in my child theme and added the modernizr.custom.js file.

Then I added your suggested code above to functions.php

//* Enqueue scripts and styles

add_action( 'wp_enqueue_scripts', 'ch_enqueue_modernizr' );

function ch_enqueue_modernizr() {

wp_enqueue_script( 'modernizr.custom', get_bloginfo( 'stylesheet_directory' ) . '/js/modernizr.custom.js', array( 'jquery' ), '1.0.0' );

}

I'm making progress, as the link rotates when I hover over it (previously the blue link simply shifted to white). Now I gotta figure out why the text within the link disappears after the rotation.

Got all this going on MAMP...wondering if that could be an issue.

[keithmoore43]

Yeah, I was getting Christoph's result without the js. Anyone got tips on how to get it into my framework? I installed modernizr in my last html class, working with simple web pages. I know you drop the code in the head and put the file in a js folder, but I don't know which folder that would be in WP.

[keithmoore43]

Thanks, Christoph! I got the first example to work where the brackets appear around each link. I tried example two (where the link rotates like a slot machine) and it didn't work, instead rotating into a white link that disappears--like maybe half of the CSS worked. If you've got any thoughts on that it would be awesome, but I'm happy just getting one idea to work, so thanks for that!

[keithmoore43]

Hmm, a little confused here. I added max-width: 100% to the .site-inner class, which extends everything to the edges, including the white content area, when the goal is to just get the orange/yellow background to extend.

When I "inspect element" on the white border, it simply points to site-container, but I've got no clue where to expand the margins from that info.

And you're saying to put all the above code above the @media section? I tried that and got the borders to extend, but then the content and widget areas went way out of whack.

I appreciate the help. 🙂

[keithmoore43]

I'm working on MAMP, so I'm not sure how to share it. But I started playing with a subdomain before doing that, so I just copied the CSS file over from the MAMP version.

Keith site.

Thanks!

[keithmoore43]

Cool, Graham helped me nail it. I had to choose "custom URL". Thanks.

[keithmoore43]

I've played with the image size, so that makes sense. But what I'd like is a smaller image on the page (a guitar poster I'm going to sell through the site) and when you click on it you're see a larger image that is more hi-res so you can see the details better--a different image of the same poster.

I only have two images of this poster, the smaller one, which is lower resolution (thus offers no detail when enlarged), then the higher res one above.

[Author]

Posts