Community Forums › Forums › Archived Forums › Design Tips and Tricks › Customised Minimum Theme Responsive Issue
- This topic has 9 replies, 2 voices, and was last updated 10 years, 11 months ago by Anita.
-
AuthorPosts
-
April 21, 2013 at 4:34 am #36666SmartyMember
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
April 21, 2013 at 5:51 am #36668AnitaKeymasterWhat 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.
Love coffee, chocolate and my Bella!
April 21, 2013 at 6:34 am #36677SmartyMemberYes 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
April 21, 2013 at 6:43 am #36678AnitaKeymasterWhat 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.
Love coffee, chocolate and my Bella!
April 21, 2013 at 7:15 am #36680SmartyMemberHi 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
April 21, 2013 at 7:17 am #36681AnitaKeymasterOh, one more thing - remove the 200px left margin.
Love coffee, chocolate and my Bella!
April 21, 2013 at 8:58 am #36700SmartyMemberI 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
April 21, 2013 at 9:32 am #36707AnitaKeymasterUsing 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%; }
Love coffee, chocolate and my Bella!
April 21, 2013 at 9:52 am #36708SmartyMemberThanks Anita your a star!
Web Design, Development & Consultancy
Being The Best He Can Be! | http://www.paul-smart.co.uk
April 21, 2013 at 9:59 am #36711AnitaKeymasterawww, thanks, but I am still learning. I am not a PRO yet, but working on it.
Love coffee, chocolate and my Bella!
-
AuthorPosts
- The topic ‘Customised Minimum Theme Responsive Issue’ is closed to new replies.