Image Positioning for small screen

[kellyf]

Hello,

I have 2 questions about a WordPress website I’m working on.
http://mjbfoundationandsidingrepair.com/

1. The image at the top next to the logo (MJB Foundation and Siding Repair) slides behind the logo when the screen is smaller(ex. mobile) I’d prefer not to have to add another .css file to solve this issue. Is there a way to add a value to the .wrapper to make the image float below the logo when the screen is smaller?

2. The bottom right image of the quote disappears when it is viewed on a mobile device. In the #quote div selector. I’ve had to fiddle with the quotes to get them both to appear on all browser’s. Now that they both show up on all the browser’s, the bottom left one disappeared on mobile view. kinda like whack a mole with these quote images…

here’s the custom css I’ve added http://codepen.io/kfar/pen/ZYgQOg

[kellyf]

Hi,

Thanks for the help. I tried to implement it but WordPress has the .wrapper written in php in the header.php file. I tried to modify as best I could but I am not up to writing in the new classes into php. I started with the span class=”site-title since the logo is already written into the php. (should I move to the php forum for help with this part? I’ll post the changes I made in the php.

As it is the MJB image disappeared when I modified the header.php and added the css you provided… I’ve left it as is if you’d like to take a look. the header.php code is listed under html in codepen.

http://codepen.io/kfar/pen/ogKwLr

[kellyf]

That’s too bad. I have come here before and troubleshot complicated CSS issues online.

Thank you for trying.

And yes I understand what you are saying. To each their own.

Good day.

[Author]

Posts