[Resolved] Making the Site Responsive

[mywonder]

Hello,

I am brand new to this theme today, a few months new to WordPress, and I have no coding skills. I purchased the add-ons today and spent the afternoon fairly easily creating a site that looks great on my laptop screen, and it was much easier to customize than other themes with all the custom controls. So I thank and congratulate you!

However, when I view my site in the site I use to check for responsiveness it only looks correct in iPad Portrait and Landscape. Viewed on Small Tablet and smaller, it begins to look strange. The site title begins to break up into two lines (and in a very unnatural spot. It actually breaks in the middle of a word of the Site Title).

Also, I am using a plug-in for opt-ins, Bloom by Elegant themes. I have the opt-in in the sidebar. The opt-in form looks great down as small as the small tablet, but once I get down to the iPhone view, the heading of the opt-in form begins divide in an unnatural way–again, in the middle of a word.

Anything you can do to help is appreciated.

Also, should I take the time to tag my posts? I am in another forum where tags don’t help with the search at all, but if it would help others to have posts tagged, I will gladly tag mine!

Thanks so much for your time!

[Tom]

Hi there,

Some further optimization may have to be done sometimes – especially dealing with large fonts on mobile.

For your site title, we can decrease the font size on mobile so it fits more naturally:

@media (max-width:768px) {
      .main-title {
            font-size: 20px;
      }
}

We can do the same with your opt-in, but I would need to know the classes/elements in order to give you code.

I think tags help with search in bbPress, but it’s totally up to you 🙂

[mywonder]

Thanks for the code.

I read your article in your signature line about using your blank child theme. Before I proceed, I wanted to ask a question for clarification

Are you saying to download your blank child theme and use that only for the CSS code you give us? Or are you saying to download your blank child theme and use that for all our customizations? Should I re-download a fresh copy of GeneratePress and then use a child them to redo what I did yesterday when I first downloaded GeneratePress? Am I wanting to keep an orignal version of GeneratePress with the original defaults for when the theme updates?

I truly hope my question is clear. I am pretty new to this stuff.

You mentioned NOT using the blank child theme when you are using one of your Child Themes on wordpress.org. I imagine you are talking about OTHER child themes you have, rather than the blank child theme?

Thanks, Tom! (btw, where are the other child themes found? I looked in WordPress and didn’t find them)

Be well…

[Tom]

Child themes should be used to make any code changes (adding CSS, PHP functions, overwriting core templates). If the changes you’ve made are within the Customize section of your Dashboard, you’re good without a child theme. You won’t have to re-do anything.

That’s correct – you can alter the blank child theme all you like because I’ll never release an update for it (it’s completely blank, so there’s no need to).

The other child themes which do receive updates sometimes are here: https://wordpress.org/themes/author/edge22/

Let me know if that makes sense or not 🙂

[mywonder]

I think I understand (hope I don’t become your problem child 😀 )

Are you saying that if I purely use the Customize section of the dashboard, I don’t need to use a child theme, but if I want to use any code you give me, I should use the blank child theme? I am imagining that if I want to use any code you give me in a blank child theme, I also need to use the Customize section of the dashboard within the same (no longer blank) child theme. Is that correct?

I really don’t mind re-doing what I did yesterday, just wanting to make sure I am understanding correctly.

I guess the other question I have is, how blank is blank? Underlying my question, I am wondering if I could end up causing a lot of issues with responsiveness by beginning with a blank child theme. I started this thread out of wanting to make my header responsive…

Oh, one more question…you mentioned above: “We can do the same with your opt-in, but I would need to know the classes/elements in order to give you code.”

Since I am so new at this, I do not know what classes/elements means or where to find them. Is that something you can direct me to that won’t take up too much of your time explaining?

Many thanks!

[Tom]

Are you saying that if I purely use the Customize section of the dashboard, I don’t need to use a child theme, but if I want to use any code you give me, I should use the blank child theme?

That’s correct – any changes made inside the Customize section are added to your database.

To add code, using the “blank” child theme is the best option.

I am imagining that if I want to use any code you give me in a blank child theme, I also need to use the Customize section of the dashboard within the same (no longer blank) child theme. Is that correct?

The settings in the Customize section will be there no matter what – child theme or parent theme, they won’t go anywhere.

I can tell you the elements you can use if you can link me to your site 🙂

Thanks!

[mywonder]

Tom,

I downloaded the blank child theme, activated it, and it wasn’t blank. It already had all the same styling my GeneratePress theme had that I gave it yesterday. Is that what was supposed to happen? I made sure the Premium Plug-in was inactivated before doing this. I’ve gone through the process a couple times (activating a different theme, inactivating the plug-in, downloading the blank child theme and uploading it back into WordPress again). Each time, all the styling I gave GeneratePress is already there in the blank child theme.

I also found the editor and copied and pasted the code exactly as it appears above, but nothing changed in the way the site displays on mobile screens. It still breaks in the middle of a word. I’m assuming it is something I did wrong, but any suggestion you can tell me about how a newbie might use that editor incorrectly, I am all ears!

I do have the site title pretty large, so if it helps you to know, I am using Bubblegum Sans font at 85 px with 20 characters, including spaces between words.

Really, really curious now what the blank child theme is supposed to look like!

Thanks so much….

[Tom]

The blank child theme has no look – it inherits the default look of the parent theme. You shouldn’t even be able to tell it’s activated, it just allows you to add your own custom CSS and functions.

Can you link me to the site where the mobile CSS isn’t working so I can take a look?

Thanks!

[mywonder]

Tom,

I thought I was supposed to use all the options in the Appearance-Custom part of my dashboard to modify the look of the blank child theme, did I get that wrong?

Nevertheless, all the styling was already there from the day before when I uploaded the child theme.

However, I changed most of the styling yesterday. This theme is addictive!

I am working using a private Sandbox URL, so really need to avoid posting that URL here. I am using it to learn WordPress and try out lots of things. As I learn, I do lots of goofy things, sometimes on purpose to see what happens.

I am going to send you the URL through your contact form. I know that is not the intended use of your contact form, but it’s the only way I can see to get that URL to you and keep my site private for now.

Of course, I would expect your response here on the Forum and not through private email. And when I am ready to go public, I will come back here and add a URL so others can benefit from seeing what you helped me with.

Hope all that is ok with you.

Once again, many thanks, you are much appreciated…

[Tom]

My mistake, I gave you the wrong CSS:

@media (max-width:768px) {
      .main-title {
            font-size: 20px;
      }
}

As for the your opt-in title on mobile, this should help:

@media (max-width:768px) {
      .et_bloom .et_bloom_form_header h2 {
            font-size: 16px;
      }
}

Let me know 🙂

[mywonder]

Tom,

You fixed the header issue! Thank you sooooo much!

The code for the widget didn’t change the way it displays on that test site I use (http://www.studiopress.com/responsive/). I can’t detect any change, actually. Just as before I put in the code, the opt-in widget looks fine when displayed under the content in mobile. The only issue is with iPad in landscape, that one letter from the heading wraps to its own line. I know I may be misusing the word “wrap” here, perhaps I should say “displays.”

Again, certainly could be an issue with my inexperience with WP and using the code you gave me incorrectly, but I promise that I did make sure to hit update file 😀

Best to you…

[Tom]

It looks good on 320 and up – 240 is really tiny, most phones these days are larger than that.

Either way, the widget is using !important, which means you have to as well:

@media (max-width:768px) {
      .et_bloom .et_bloom_form_header h2 {
            font-size: 16px !important;
      }
}

[mywonder]

Hi Tom,

It worked!!! Many thanks, and I have sent you another form of thanks, which you should receive shortly if you haven’t yet. 🙂

And fully agree here re: the 240 size–not really concerning myself with that one.

I have yet to figure out how to leave a review on WordPress.org but my experience here has motivated me to figure that one out.

GeneratePress is a fabulous solution for me, and you are my new hero!

Best to you…

P.S. I have tweaked my site again since you looked at it (you make it so easy! when will I stop?). I think it looks a little “tighter” and more professional now.

[Tom]

Thanks so much for the donation! I really appreciate it! 🙂

To review on WordPress.org, you need to create a free account, then login and you can review here: https://wordpress.org/support/view/theme-reviews/generatepress#postform

Thanks again! Glad you’re enjoying GP.

[mywonder]

You are very welcome…I hope everyone makes a much-deserved donation to you.

Thanks for the instructions on the review. I’ll do it!

You don’t need to reply to this post 🙂

[Author]

Posts