Decrease the width of dropdown menu on pipeline theme

[Rizwan12]

Hi there,
I’m new on shopify, currently I’m using pipeline theme,

I would like to decrease the width of the dropdown menu and make the product images smaller. It seems that they are taking up too much space on the screen.

Please help me to fix this,
Thank you very much.

[syedsumaimaly]

Hi @Rizwan12

Would you mind to share your store URL website, with password if its protectd? Thanks!

[Rizwan12]

Thank you for your response,
Here is my store link,
https://06157e-2.myshopify.com/

[syedsumaimaly]

@Rizwan12 Password..?

[Rizwan12]

Sorry for the inconvenience,
Please check the link again and let me know if you need anything else.

[syedsumaimaly]

@Rizwan12 can you invite me as a collaborator..?

[Rizwan12]

Sorry I can’t send invite you as a collaborator,
If you could help me to resolve this issue by using code editor, it would be really appreciable.

[syedsumaimaly]

@Rizwan12 No problem.. I am trying to get the actual element using editor..

[syedsumaimaly]

** @Rizwan12 Try This..**

Follow these Steps:

Go to Online Store Edit Code Find theme.liquid file or base.css

Add the following code in the bottom of the file above tag

product-grid-item-variant.product-grid-item__content { 
width: 30%; 
display: inline-block;
}

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solutions

[Rizwan12]

I put your code above ,
But it did not work, let me know if I’m doing something wrong.

On your screenshot, the product image is small but the text is still big, could you also make the text smaller as the product image gets smaller?

[Rizwan12]

I placed your code and I successfully achieved the desired result. Thank you very much for your assistance. One final question: How can I align the text with the image, and how can I reduce the size of the text?

Code: product-grid-item-variant.product-grid-item__content {
width: 30%;
display: inline-block;
}

[syedsumaimaly]

@Rizwan12

Add the following code

{% style %}
.product-grid-item-variant .product-grid-item__content {
  width: 30%;
  display: inline-block;
}
.product__grid__title{
font-size:20px;
}
{% endstyle %}

If I managed to help you then, don’t forget to Like it and Mark it as Solutions

[syedsumaimaly]

Can you please marked the solution..? &

You can add this code above the {% endstyle %}.

.product__grid__title{
font-size:20px;
text-alight: left;
}

If I managed to help you then, don’t forget to Like it and Mark it as Solutions

[Rizwan12]

Thank you very much for all your support and effort, I used your first code that is:-

product-grid-item-variant.product-grid-item__content { width: 30%; display: inline-block; }

and it worked perfectly. images are now in small sizes,

This code also work for decreasing the size of tittle text:-

.product__grid__title{ font-size:20px; text-alight: left; }

Sorry for this last request,
could you please help me to align the product image with center of the product tittle,
Thanks again for all your help.

[syedsumaimaly]

If I managed to help you then, don’t forget to Like it and Mark it as Solutions

[Rizwan12]

Yeah, definitely,
It would be really appreciable if you help me to create a dropdown as per your above screen shot without the app.