Responsive Classic Redesign Support thread

rlexyd:

Thank you once again :) I did as you suggested above.

For centering the headers, sorry I meant the middle column boxes, please (view snapshot).

As for the white space, it helped a little, but I reckon there's more space that can be removed if not used.

1.1) How do I Center the Search Box? I tried adding a few things above the width but none worked.

To center Middle column on your example -- add this before your @media (min-width: 576px)

.centerBoxHeading {
     text-align:center;
}

If you want to remove more of the white spacing try this

Find

#productsListingBottomNumber, #productsListingTopNumber {
    margin-bottom: 1rem;
    margin-top: 1rem;
}

replace with

#productsListingBottomNumber, #productsListingTopNumber {
    margin-bottom: 0;
    margin-top: 0;
}

To center search box

find (make sure you change the one that is in @media (min-width: 992px)

.search_box form {
        display: flex;
}

replace with

.search_box form {
   display: flex;
   justify-content: center;
}

That worked a treat, thank you very much :)

Thanks once again!!.

I added the below code you gave me to my stylesheet_custom.css in order to display 2 Products side by side in Mobile view

Looks great, the only thing I'm noticing when 2 items side by side have different title length, they don't align nicely, is there a way to fix that somehow so they can align nicely?

Thanking you in advance.

@media (max-width: 576px) {

    /* Global 2-column grid */
    div:has(> .rblockelements) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    /* Remove Zen Cart row grouping */
    .rblockelements {
        display: contents;
    }

    /* Reset product/category boxes */
    .rblockelements > div {
        float: none !important;
        width: auto !important;
        margin: 0;
        box-sizing: border-box;
        min-width: 0;
    }

}

I found this code on Google while searching for an answer to my previous post, I think it did the job by adding space to align with the price 😄

I added the below to my template stylesheet_zcustom.css file.

@media (max-width: 576px)

.itemBox, .product-card, .centeredContent {

display: flex;

flex-direction: column;

justify-content: space-between;

height: 100%;

}

.product-price, .itemPrice {

margin-top: auto;

text-align: center; /* or left/right depending on preference */

}

Is this the right way to do it on your template and/or is this the best result solution?

Thanks.

rlexyd:

I found this code on Google while searching for an answer to my previous post, I think it did the job by adding space to align with the price 😄

I added the below to my template stylesheet_zcustom.css file.

@media (max-width: 576px)

.itemBox, .product-card, .centeredContent {

display: flex;

flex-direction: column;

justify-content: space-between;

height: 100%;

}

.product-price, .itemPrice {

margin-top: auto;

text-align: center; /* or left/right depending on preference */

}

Is this the right way to do it on your template and/or is this the best result solution?

Thanks.

If you send me a snapshot of what you changed i can let you know. But if you used this CSS and it looks correct and works as expected, then it should be fine. There are many different ways to achieve the same result with CSS.

rlexyd:

Thanks once again!!.

I added the below code you gave me to my stylesheet_custom.css in order to display 2 Products side by side in Mobile view

Looks great, the only thing I'm noticing when 2 items side by side have different title length, they don't align nicely, is there a way to fix that somehow so they can align nicely?

Thanking you in advance.

@media (max-width: 576px) {

    /* Global 2-column grid */
    div:has(> .rblockelements) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    /* Remove Zen Cart row grouping */
    .rblockelements {
        display: contents;
    }

    /* Reset product/category boxes */
    .rblockelements > div {
        float: none !important;
        width: auto !important;
        margin: 0;
        box-sizing: border-box;
        min-width: 0;
    }

}

I looks good to me. Send me a screen shot maybe i am misunderstanding.

Ok spoke to soon, using that code did align the squares correctly but it's hiding the price depending on title length as a result, so i've removed it.

What other ways are there to align them in mobile view when displaying two products side by side, please view snapshot of the misalignment.

On top of the previous request above, are you able to help out with the following things, View Snapshot circled them with different colours and will write the changes needed below to correlate with the colour/requested change for clarity.

1-Yellow: How do I add an image icon for the product?

2-Black: How to make those 3 Headers stand out more to differentiate and make them stand out?

3-Teal: The Edit Icon doesn't sit in the right spot, how to move it?

4-Red: How to add more padding to the middle between left and right columns, maybe even I border/line? I feel it's too busy and close together.

5-Blue: How to move that to the left to align the shipping rate and the image/icon?

6-Pink: How to align/move the Payment image icon further right, I'm moved it right but that's as far as it goes?

7-Green: How to move the PayPal Payment image/icon to go under the payment text like the Bank Payment image above it and align it to the right as well, I tried but it just can't figure it out myself?

Thanking you in advance and appreciate all your help!

chadlly2003:

rlexyd:

I found this code on Google while searching for an answer to my previous post, I think it did the job by adding space to align with the price 😄

I added the below to my template stylesheet_zcustom.css file.

@media (max-width: 576px)

.itemBox, .product-card, .centeredContent {

display: flex;

flex-direction: column;

justify-content: space-between;

height: 100%;

}

.product-price, .itemPrice {

margin-top: auto;

text-align: center; /* or left/right depending on preference */

}

Is this the right way to do it on your template and/or is this the best result solution?

Thanks.

If you send me a snapshot of what you changed i can let you know. But if you used this CSS and it looks correct and works as expected, then it should be fine. There are many different ways to achieve the same result with CSS.

I see what happening. Your code is not working correctly. If you remove this code should display correctly.

.itemBox, .product-card, .centeredContent {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  height: 100%;

}

If i were you i would remove the entire piece of code. Its not doing anyting

@media (max-width: 576px)

.itemBox, .product-card, .centeredContent {

display: flex;

flex-direction: column;

justify-content: space-between;

height: 100%;

}

.product-price, .itemPrice {

margin-top: auto;

text-align: center; /* or left/right depending on preference */

}

rlexyd:

On top of the previous request above, are you able to help out with the following things, View Snapshot circled them with different colours and will write the changes needed below to correlate with the colour/requested change for clarity.

1-Yellow: How do I add an image icon for the product?

2-Black: How to make those 3 Headers stand out more to differentiate and make them stand out?

3-Teal: The Edit Icon doesn't sit in the right spot, how to move it?

4-Red: How to add more padding to the middle between left and right columns, maybe even I border/line? I feel it's too busy and close together.

5-Blue: How to move that to the left to align the shipping rate and the image/icon?

6-Pink: How to align/move the Payment image icon further right, I'm moved it right but that's as far as it goes?

7-Green: How to move the PayPal Payment image/icon to go under the payment text like the Bank Payment image above it and align it to the right as well, I tried but it just can't figure it out myself?

Thanking you in advance and appreciate all your help!

I see the snapshot but your site looks fine. Am I misunderstand you.

Thanks for looking into it, at this stage I don't ship internationally so the payment and shipping options didn't come up for you, that's why you couldn't see them

I've edited your test customer account to an Australian address, please try going thru the checkout process again and you'll see what I mean.

Thank your once again.

rlexyd:

Thanks for looking into it, at this stage I don't ship internationally so the payment and shipping options didn't come up for you, that's why you couldn't see them

I've edited your test customer account to an Australian address, please try going thru the checkout process again and you'll see what I mean.

Thank your once again.

Okay i see you moved some stuff around.

Lets start with this.

add this to stylesheet_zcustom.css at the very bottom

 #checkoutOneCartGroup {
  margin-left:0; 
  position:relative;
}

Once you add this it will align the the products, edit button and spacing issue. This will make it easier to look at and make the necessary adjustments.

Ok, I've removed the code from Google and added the above code at the bottom of stylesheet_custom.css.

The products are of course back to not aligning nicely again in Mobile View, please see Snapshot.

rlexyd:

Ok, I've removed the code from Google and added the above code at the bottom of stylesheet_custom.css.

The products are of course back to not aligning nicely again in Mobile View, please see Snapshot.

looks good on my end. Clear your cache from the browse. Especially if your changing css and using chrome.

Thank you!

I added the following code you suggest to the bottom of stylesheet_zcustom_opc.css instead, and it fixed my OPC page middle alignment :)

#checkoutOneCartGroup {
  margin-left:0; 
  position:relative;
}

As for the alignment on the Products from the front Page in Mobile View, still no good since removing the css code I got from google as you can see in this Snapshot!

1-Yellow: How do I add an image icon for the product?

2-Black: How to make those 3 Headers stand out more to differentiate and make them stand out?

3-Teal: The Edit Icon doesn't sit in the right spot, how to move it? FIXED.

4-Red: How to add more padding to the middle between left and right columns, maybe even I border/line? FIXED.

5-Blue: How to move that to the left to align the shipping rate and the image/icon?

6-Pink: How to align/move the Payment image icon further right, I'm moved it right but that's as far as it goes?

7-Green: How to move the PayPal Payment image/icon to go under the payment text like the Bank Payment image above it and align it to the right as well, I tried but it just can't figure it out myself?

The above steps is what's left to go through if possible please. View Snapshot!

rlexyd:

Thank you!

I added the following code you suggest to the bottom of stylesheet_zcustom_opc.css instead, and it fixed my OPC page middle alignment :)

#checkoutOneCartGroup {
  margin-left:0; 
  position:relative;
}

As for the alignment on the Products from the front Page in Mobile View, still no good since removing the css code I got from google as you can see in this Snapshot!

1-Yellow: How do I add an image icon for the product?

2-Black: How to make those 3 Headers stand out more to differentiate and make them stand out?

3-Teal: The Edit Icon doesn't sit in the right spot, how to move it? FIXED.

4-Red: How to add more padding to the middle between left and right columns, maybe even I border/line? FIXED.

5-Blue: How to move that to the left to align the shipping rate and the image/icon?

6-Pink: How to align/move the Payment image icon further right, I'm moved it right but that's as far as it goes?

7-Green: How to move the PayPal Payment image/icon to go under the payment text like the Bank Payment image above it and align it to the right as well, I tried but it just can't figure it out myself?

The above steps is what's left to go through if possible please. View Snapshot!

This should look good on all devices. Let me know whats left

please add this to stylesheet_zcustom_opc.css.

/* #2 make three headers different colors */
 #opc-billing-title {
     color: #7A1BCE;
}
 #checkoutShippingMethod legend {
     color: #008000;
}
 #checkoutPaymentMethod legend {
     color: #8B008B;
}
 #checkoutOneCartGroup legend {
     color: #808080;
}
 #checkoutShippingChoices legend {
     color: #000000;
}
/* this will fix #5 #6 #7 on mobile tablet and desktop */
 #bankpayment {
     margin-bottom:1.5rem 
}
 #pmt-dirbankaus + label.radioButtonLabel {
     display: block;
     width: 100% !important;
     max-width: 100%;
     box-sizing: border-box;
     height: auto;
     margin-bottom:1.5rem;
}
 #bankpayment {
     float:none !important;
}
 @media (min-width: 576px) {
     #bankpayment {
         float:right !important;
    }
}
 @media (min-width: 768px) {
     #bankpayment {
         margin-left:1.5rem 
    }
     #checkoutPaymentMethod label {
         height:auto;
    }
     #checkoutPaymentMethod .custom-control > label.radioButtonLabel {
         display: block;
         width: 100%;
         max-width: 100%;
         box-sizing: border-box;
         height: auto !important;
    }
}
 @media (min-width: 992px) {
     #bankpayment {
         float:none !important;
    }
}
 @media (min-width: 1200px) {
     #bankpayment {
         float:right !important;
    }
}
 

Thank you once again, this only solved step 2 :)

Step 6-Pink is only solved in Desktop mode, in mobile view, it's still on the left, not all the way to the right.

Steps 5-Blue & 7-Green are still the same, I don't see any change. (I've cleared my cache of course)

Plus there's still step 1-Yelow.