I am not much of a coder. But I like to learn. I am using a Genesis child theme (SmoothPost 2). So far I have customized a lot of it. But I am running into a few issue when it comes to responsiveness.
The child them (original version) is responsive, but I added a few new widgets and other stuff that aren’t quite responsive. I have been at this for days and I just can’t figure this out.
I would really appreciate any help.
You can see all these issues on the homepage of the site (http://moneypantry.com).
The issues:
I created a new loop where I display recent posts in a masonry style with one full-width on top, then 2 half width below and it repeats over and over.
How can I get each box to display full width in smaller screens (smartphones)?
- The “Continue to the Blog” text (inside a CSS box with an arrow pointing down) breaks on smaller screens. The words get stacked up and the CSS box looks broken.
-
Same issue with the “Welcome to MoneyPantry” text. On small screens it stacks but part of it (on the right side) sits outside of the view.
-
The last issue is with the “Best of MoneyPantry” section. I have the padding-bottom set at 30%, but depending on the device, it comes up short (overlaps with the container below it). Is this a matter of just increasing the padding from 30% to more, or is there something else?
Sorry for so many questions. I would appreciate help on any of them. Sorry if I didn’t explain everything clearly. And thank you in advance for any help.
