Responsive front page and footer font size

Hi Sabrina,

* On the start page (Home), the featured text displays in a really narrow column on the left and the featured image is rather small and sits on the right. Ideally, on mobile I would like to display the content parts below each other in the following order: featured header – featured subheader – featured image (full width) – featured text (full width) – call to action. Is this possible without changing the way things look on desktop and how?

Yes, definitely possible. For a pure CSS option, flexbox would be the most logical option. You can read more about that in this guide on CSS Tricks. If you need to support older browsers, there is a shim available.

Another pure CSS option would be to stack the items in the markup as you want them to be ordered on mobile widths. But then use absolute positioning to take the image out of the document flow. Then, use a responsive breakpoint to make sure the image is position: static on mobile widths.

You could also use JavaScript to rearrange the order of the divs on mobile widths. But I’d lean toward one of the pure CSS options.

Hi Leland,

Thank you for your reply. As my JavaScript knowledge is even more limited (not to say inexistent), I would also like to go for a CSS solution.

I have tried to understand flexbox but am still unsure how to create the correct code. Actually, the tutorial does not even say if it should go in style.css or another file and where in that file… This is unfortunately a bit too high-level for me without further explanation…

Could you please explain in more detail how to do it? What code to use, where to put it?

For the other option, I do unfortunately not know how to “stack the items in the markup” either – could you please explain again step by step for a beginner?

Thank you so much and kind regards,

Sabrina

The Flexbox Guide I linked to wasn’t geared specifically to WordPress sites, just any website in general. To add custom CSS to a WordPress site, you have a few options like creating a child theme.

To keep things simple, I’d recommend just using a plugin like Simple Custom CSS so you can get straight to the point.

I know this isn’t the ultimate goal, but do you think you could get your site to a point where it looks like what you see in this screenshot? https://cloudup.com/cuDKV06mSiW

From there, I can help you with some custom CSS.

(I also haven’t forgotten about the footer question. I just want to focus on one thing at a time.)

Hi Leland,

As I said, I have already created a child theme. So I guess I can do everything in there or do I still need the plugin? I can add custom CSS right in my theme, there is an option for that.

What you are showing in your screenshot is how I want the website to look on mobile, but not on desktop. Is this feasible?

As the behaviour is correct on all other pages except the start page, maybe I should simply create my own start page instead of using the preset one?

Also, I have seen on demos.cyberchimps.com/responsivepro that in the pro version of Responsive Theme, the footer actually behaves responsive (widgets show below each other on mobile) and it looks really good. I wonder what the difference in the code is and if I can imitate that behavior for my child theme?

Sorry I keep coming back to the footer, I know you want to fix one thing after another, but since in that case both matters would be solved by inserting a line break or whatever it is called, I thought I’ll bring it up again ??

Thank you,

Sabrina

As I said, I have already created a child theme. So I guess I can do everything in there or do I still need the plugin? I can add custom CSS right in my theme, there is an option for that.

My fault, I missed where you said that. Yes, please continue adding the custom CSS to your child theme, as you have been doing. The Simple Custom CSS plugin would be unnecessary in this case.

What you are showing in your screenshot is how I want the website to look on mobile, but not on desktop. Is this feasible?

I understand what you mean. After you do this, I’ll give you the CSS you’ll need to position the image to the right on desktop widths.

Then on mobile widths, we’ll have everything is in order in the markup already so we won’t need any messy JavaScript solutions.

We can circle back to the footer issues after this is taken care of. ??

After you do this, I’ll give you the CSS you’ll need

do what? ??

Simply move the image into the first column, leaving the second column open, as seen in this screenshot: https://cloudup.com/cuDKV06mSiW

Simply move the image into the first column

I do not know how to do that with the template. There are only fields where the text blocks, the link to the image and the CTA link can be entered. Therefore, I have now created my own front page so that issue is solved, although it does not look as good on desktop as before.
I would still be grateful for help with the footer widgets though.
thanks!

Your footer widget issue will be solved by making the columns full width when it reaches a narrow enough width.

It’s puzzling that a theme called “Responsive” doesn’t do this already, but here is the code to add to your child theme’s CSS to do that:

@media screen and (max-width: 650px) {
	#footer_widget .grid {
 		float: none;
		margin-right: 0;
		width: 100%;
	}
}

The (max-width: 650px) is just a width that I found where the footer widgets started to look too smushed, feel free to adjust it as you see fit.

The rest of the code targets each footer widget, makes them 100% of the width, reset the now unnecessary “float” value (which would be useful if you wanted them to be next to each other, not stacked), and remove the right margin (again, unnecessary when stacked).

Hope this helps. ??

wow, that works just perfectly! thank you sooo much. if you are ever in vienna, I’ll treat you to a free yoga class or a beer, whichever you prefer!
yes, that’s also what I thought… maybe that’s the template designer’s way to try and sell some pro versions ??
Thank you again and Namaste!