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.