Customised Minimum Theme Responsive Issue

[Smarty]

Hi All,

I have a mobile responsive problem with a new website http://www.vintagephotorepair.co.uk,

When you view the site on a mobile the homepage text is all crunched up to left handside and on other pages the images are not aligned properly.

I know its down to me and I am missing something, any advice would be really appreciated.

Thanks

---

Web Design, Development & Consultancy

Being The Best He Can Be! | http://www.paul-smart.co.uk

[AnitaC]

What are you trying to accomplish with that Home-Text widget. You have a 200px left margin in there. Are you trying to align the picture next to that text box.

---

Need help with customization or troubleshooting? Reach out to me.

[Smarty]

Yes that is exactly what I am trying to do, if necessary we are happy to loose the negative image on mobiles and have full width text below the header image.

---

Web Design, Development & Consultancy

Being The Best He Can Be! | http://www.paul-smart.co.uk

[AnitaC]

What you could do is - create a page for that information. Use the Negative image as the Featured Image. Add your content. Then drag a Featured Page widget into that area - select that new page. Check the box for Featured Image and select your size. Float the image Left so that the text is to the right. You can add a title but not the Meta information. If you don't want the visitor to be taken anywhere "on click" - down on the page itself is an SEO Setting for URI - put in the web address of the home page, i.e., http://www.vintagephotorepair.co.uk/. Then save it. If they click the area, it will keep them on the home page.

This might be the easiest way and you can easily swap out the content if you need to later.

---

Need help with customization or troubleshooting? Reach out to me.

[Smarty]

Hi Anita,

Thanks for your quick reply and suggestion, I'll give a try.

Thanks again & all the best.

---

Web Design, Development & Consultancy

Being The Best He Can Be! | http://www.paul-smart.co.uk

[AnitaC]

Oh, one more thing - remove the 200px left margin.

---

Need help with customization or troubleshooting? Reach out to me.

[Smarty]

I have changed the 200px to 20px, just to see the affect and it has moved the text to the right on the page, can you suggest anything to bring it back more centralised.

Is there anyway to add a media query that will make the text full width on a mobile and "hide" the negative image.

Thanks

---

Web Design, Development & Consultancy

Being The Best He Can Be! | http://www.paul-smart.co.uk

[AnitaC]

Using the code you have in there:

Change the margin from 100px to 10px.

.home-callout img {
    display: block;
    float: left;
    height: auto;
    margin: 40px 0 10px 100px;
    max-width: 100%;
    overflow: hidden;
    padding: 0 0 0 50px;
}

Change this left margin from 20px to 50px and it will move it over.

.home-text {
    display: block;
    float: right;
    margin: 40px 20px 20px 0;
    overflow: hidden;
    padding: 10px 20px 0;
    text-align: left;
    width: 40%;
}

---

Need help with customization or troubleshooting? Reach out to me.

[Smarty]

Thanks Anita your a star!

---

Web Design, Development & Consultancy

Being The Best He Can Be! | http://www.paul-smart.co.uk

[AnitaC]

awww, thanks, but I am still learning. I am not a PRO yet, but working on it.

---

Need help with customization or troubleshooting? Reach out to me.

[Author]

Posts