Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

mail_open
any good coders about for CSS and responsive designs
Calum Roberts
Member
January 20, 2014 - 5:43 pm
Member Since: January 4, 2014
Forum Posts: 275
sp_UserOfflineSmall Offline

Ive come across a little bit of css code that redesigns the checkout page in magento making it look somewhat better. This is jsut some css code you insert into your styles.ccs. Ive tried it on my test site and it works fine with ultimo, unfortunately it isnt responsive so doesnt render on a mobile screen properly and is unusable for that.

So if there is any one about that is able to work out how to get this working with a responsive site or can suggest how how to use this css code when browsing on a computer but use the standard checkout when on a mobile device this would be a great alteration to the checkout page.

cheers

http://www.h-o.nl/blog/improve….._css_only/

Avatar
TheWebsiteGuy (Chris Astley)
support@thewebsiteguy.xyz

Partner
January 20, 2014 - 9:56 pm
Member Since: November 8, 2013
Forum Posts: 101
sp_UserOfflineSmall Offline

Hi Calum,

You could wrap your css inside a media query with a minimum width like the example below;

@media screen and (min-width: 960px) {
…………..your custom checkout css…………..
}

This will only enable is on screen sizes of 960px or greater, you can adjust this size to be the smallest your checkout displays correctly with the addtional css. If you check this using Google Chrome with Inspect Element open it shows you the screen size in the top right as the drag/resize the browser window.

Chris

Avatar
Matthew Ogborne

Founder
January 21, 2014 - 9:24 am
Member Since: July 18, 2013
Forum Posts: 4565
sp_UserOfflineSmall Offline

Howdy chaps,

Yep this is what this site is using and why when you view it on a mobile (less that 768px) that the forum spreads to 100% and some things on the forum get hidden to make it easier to read on a smaller screen.

Matt

"Selling an item online is easy, but making living from a business that sells online, well that’s something different entirely!"

Ultimo Magento Theme

Calum Roberts
Member
January 21, 2014 - 9:09 pm
Member Since: January 4, 2014
Forum Posts: 275
sp_UserOfflineSmall Offline

Thanks Chris

If i ever get the site up and running again I will give this a go

Calum Roberts
Member
March 8, 2014 - 10:45 pm
Member Since: January 4, 2014
Forum Posts: 275
sp_UserOfflineSmall Offline

I gehter that this wot work on older browsers.
what browsers is the @media setting for

Avatar
Matthew Ogborne

Founder
March 10, 2014 - 11:00 am
Member Since: July 18, 2013
Forum Posts: 4565
sp_UserOfflineSmall Offline

Calum Roberts said

I gehter that this wot work on older browsers.
what browsers is the @media setting for

Yep that’s right, older browsers will just skip over anything with the @media tag as they won’t recognise it.

Matt

"Selling an item online is easy, but making living from a business that sells online, well that’s something different entirely!"

Ultimo Magento Theme

 

Why Should You Join UnderstandingE?

 
  • Access to over 500 step-by-step video tutorials
  • +20 video courses available
  • Magento, M2E Pro, Magmi, eBay, Amazon & Design all covered
  • Everything is in 100% Plain English
  • Learn how to build your own multi-channel software for eBay & Amazon
  • Access to the community forums, meet fellow business owners like yourself

Join Now with 2 Clicks

 

Join now for less that £1 per day you can gain access to over 400 step-by-step video tutorials & learn how to build your very own multi-channel software.

 

Forum Timezone: Europe/London

Most Users Ever Online: 1012

Currently Online:
33 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

Jim @ Moogento: 688

Steve Froggatt: 514

Badeth - UE: 513

Jimbob: 453

Paul Cartwright: 414

Forum Stats:

Groups: 6

Forums: 37

Topics: 5221

Posts: 27485

Administrators: Matthew Ogborne: 4565, Dave Furness: 4606