Changing Layout of Shopping / Checkout pages Breadcrumb

Hi,
Can the Layout (mobile device) of shopping cart and checkout pages. Can the Breadcrumb Displayed as "Review
Cart Shipping >> checkout >> Confirm >> Order Complete" can the spaces between the items be reduced so its more like
"Review
Cart >> Shipping >> checkout >> Confirm >> Order Complete" (2 spaces, 2 arrows then 2 spaces and next item) - http://postimg.org/image/vh7bu0cvr/

Website: *URL REMOVED*

Support Access open
test user: *INFORMATION REMOVED*

Thanks

Tom

  • Tom

    Thanks Predrag, that fixed it :slight_smile:

    Just out of interest do you know of any online resource that lists out all the px width of mobile devices or perhaps what the max should be set to as a general? assuming most users will be using one of these devices?
    Iphone 4/5/6/6+
    Samsung Galaxy S3/4/5/6 /Note3/4

    as i think in my CSS editor i have a mix of multiple different width set, and might be best if i change all to the same figure? or leave as is ?

    Thanks

    Tom

  • Predrag Dubajic

    Hi Tom,

    List of all screen sizes can be quite a long list with all the devices out there but what you can do is in your Chrome browser right click on page and go to Inspect Element, now click on little phone icon to enter responsive mode and from there you will see list of devices to go trough and see resolution for each one of those.

    You can keep multiple width settings in your CSS but if there are few that are same width group them under one, and use another for another device width, here is an example of code:

    @media screen and (max-width: 1024px) {
      /* Put here CSS for iPad */
    }
    
    @media screen and (max-width: 966px) {
      /* Put here CSS for Nexus 7 */
    }
    
    @media screen and (max-width: 360px) {
      /* Put here CSS for Galaxy S4 */
    }

    Hope this helps.

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.