jediseamac

Perfect! Thanks a bunch, Kathryn!

And this, too, worked right away. I couldn’t find that label “.widget-title,” and I didn’t know you could change two elements at once by having “body” on there, too. You learn something everyday! Thanks a bunch!

Thanks David! It worked like a charm! That body:not thing is some CSS I’ve never seen before. I’ll have to try to add it to my repertoire! Thanks again!

Okay, thanks for looking into that for me. I wonder why it changed its appearance on my computer screen all of a sudden. I’ll mess around with “cover” versus “contain” and see if I can get things the way I would like. Thanks again!

No, not the hardhat guy (me!), the featured image is the one with the mandolin sitting on top of the guitar and some other stuff going on. It used to be much wider. I mean that more of the guitar was in the picture, and you could see a bit above the head of the mandolin. It’s like somehow the image zoomed in, but I’m not sure what happened because it is the same image as I used before.

Hey, thanks! Yes, it is the first panel I’m referring to. I had my image framed really nicely, but then I was trying to upload the image again using a proper title instead of img.8376746 or whatever, and it changed the framing, even though it was the exact same image. I’m not sure what happened.

Whoo hoo! I can’t believe it! I felt good about what I had done, but since it was so much trial and error I was certain that there was going to be some major flaws in it. So cool!

And I already started writing a song about CSS in my head. If you want to make any genre or content requests, you can email me at [email protected]. I’ll start recording next week.

Thanks again for all the help, and talk soon!

First of all, nice pun! Until I start getting customers I have all the time in the world, so just lemme know!

Secondly, thank you, that css you gave me helped, but not exactly like I had hoped. I was still hoping for a tablet in landscape orientation to show the picture on the left and the text on the right (with a little buffer between them), but as it was, it showed the picture on top, centered, and the text below it. It looked good, but just not how I preferred. I messed around with these things a ton, and here’s what I came up with. Bear with me, because even now, I’m not sure exactly what I did, and there’s probably an easier way to do it.

So first, I changed what you gave me into this, and it looked how I wanted on a tablet in landscape, but looked weird when shrinking it, and looked bad on a phone:

@media screen and (max-width: 980px) {
  .post-7 .one_third { 
    width: 30%;
    display: block; 
    margin: 0px auto 0 auto; 
  }
  .post-7 .two_third { 
    float: right; 
    display: block; 
    margin: 0 auto; 
  }
}

After that I tried to fix it on phone screens, because the picture had gotten really small and was not centered. Here’s what I did:

@media screen and (max-width: 485px) {
  .post-7 .one_third { 
    width: 100%;
		float: none;
    display: block; 
    margin: 0px auto 0 auto; 
  }
  .post-7 .two_third { 
    float: none; 
    display: block; 
    margin: 0 auto; 
  }
}

That normalized the phone screen, but it still got uncentered and awkward in between those (probably how a tablet looks in portrait orientation, or a bigger phone or ipad mini, or something). So then I added back the original css you gave me, only decreased the max screen width, so that the picture would stay nicely centered above the text as it was being reduced:

@media screen and (max-width: 690px) {
  .post-7 .two_third { 
    width: 100%; 
    display: block; 
    margin: 20px auto 0 auto; 
  }
  .post-7 .one_third { 
    float: none; 
    display: block; 
    margin: 0 auto; 
  }
}

So now, as far as I can tell, it looks good on a full screen, on a tablet, and on a phone. On bigger screens the picture and text are next to each other with a little buffer between, and on smaller screens the picture is centered in the middle above the text.

Okay, so now is when you tell me all the things that are weird with it, I’m sure in a very pleasant and friendly way that doesn’t make me discouraged, which you’ve been doing expertly at this whole time. Thanks to you, I haven’t thrown my computer out the window, and throwing the computer out the window is kinda my thing!

Okay, take a look, and let me know what you think. Thanks a billion!

Hey thanks! I was starting down the right track with line spacing, but I didn’t actually understand what “wrap it in a media query” meant. Now I get it! I think my mobile and desktop sites look a lot cleaner and more “normal,” now, without making the other look weird. Thanks a ton!

Also, not only did you answer my payment button spacing question, but you inadvertently taught me something else. I see the .post-224 on there, so I see you can affect one page and not another by identifying the page id first. I feel like this information will come in handy for me soon.

I already tried to use it on my home/welcome page to fix the column issue I was talking about, but I couldn’t figure it out. I tried to write css to isolate that page, and then create columns that way, .col1 being 30% (for the picture) and .col2 being 60% (for the text). I tried it in as many ways as I could, with and without media queries, making changes in the text editor, etc., but I never got it. Everything kept lining up in one super thin column, and the picture was tiny. The only way I can figure to have that 1/3 2/3 column setup is through HTML, but as you can see, it is not the best for mobile. If you can provide any css that accomplishes those goals, that’d make my dreams come true. If not, you’ve already helped me so much, and I greatly appreciate it. As I told another guy who hooked me up big time, you are welcome to commission a free custom song for your troubles!

Thanks again!

Nevermind! What a clown I am! The other links didn’t have “www” in them, and I guess the browser thought I was going to a whole new site. Your first idea worked perfectly, I just screwed it up. Seriously, I’m decent at some other things in my life, but this is not one of them. Thanks again for all the help!

Alright, this is really weird. I did just what you said in my custom menu and entered the full link for the Payment page, and it worked perfectly. It smooth scrolls on the single page, and you can easily get to it from the Order Form page when you navigate away.

Then, I did the exact same thing with the custom menu for the Choose Your Song page, and something strange happened. If you click Choose Your Song in the menu, instead of smoothly scrolling directly there, the page reloads at the top, as though you’ve just clicked on a brand new page. Once it loads (I have slow internet!), THEN it scrolls down to the Choose Your Song page. I did the same thing with the Contact page just to test it, and it, too reloads the page at the top before scrolling down, instead of just scrolling right to it like before.

So as of right now, I put full links on the menu for Choose Your song (weird behavior), Contact (weird behavior), and Payment (normal behavior). The other menu items just have the #page-id, and they are functioning normally.

I should add that when looking at the menu, both Home and Payment are underlined, but none of the rest of them are. Home was always underlined, but as far as I know, I never did anything different with the Payment page than I did with any other page.

Also, could this all somehow be affected by the smooth scroll plug-in I have installed?

Okay, thanks a ton. Let me know if you want a custom song for your troubles!

@gary-barrett As I’ve worked with my page a bit more and unveiled it to the public, I’ve realized a few more issues with my navigation that I can’t quite solve on my own. I ended up putting all my pages on the single page scroll, but my Google Forms order form is awful on mobile because you can’t skip past it like on a computer. You have to see the whole thing which is very inefficient for those who don’t want to make an order.

I’ve tried to work around it by creating a “more” button for my Order Forms page, but that send my viewers away from my page. I’m okay with that, but my navigation menu doesn’t work once you’ve left the main page. Only the “Home” button works, thanks to what you showed me about the #content thing, but I really need the “Payment” link to also work, and if I could get all of them to work, that’d be even better.

If I can’t get all of the menu buttons to work, then it’d be great to remove the menu and just have a Home link, or a Home and a Payment link.

Do any of those options seem possible?

Worked like a charm on both accounts! Thanks a ton for the help!

@gary-barrett, this is amazing, thank you! I thought this was going to be a long-term project, not something I could do in an hour. All the other online explanations and videos I found were way above my pay-grade, and I couldn’t get them to work for me. I coupled what you told me with a smooth scroll plug-in (https://www.ads-software.com/plugins/page-scroll-to-id/), and now to the uninitiated, I might even appear to know what I’m doing with this web-design stuff! Thanks for the clear explanation!

So now I’m left with two small question to put a bow on this topic.

First, should I also make my “Home” page a custom link? I tried it, but then I couldn’t use the “Home” link in the menu bar to get back to my page. I have some pages that are set to regular menu links that navigate away from the main page (i.e. “Order Form.” or “Fine Print”). What do you think?

Second, and the answer to the first might influence this, is there an easy way to put a “Home” link at the bottom of all my other pages so that customers can get back to the top simply by clicking, without having to manually scroll up?

Thanks again for the help, and I look forward to your thoughts on this.

Okay, I made that change, too. Not sure what it does, but I’ll take your word for it ;). Thanks again for all the help, and I’m sure our forum paths will cross again before long!