Help with CSS - Large blank space above product image

Solved
TheShiz
Excursionist
13 1 3

Hello,

I am using the Shopify Narrative theme and have adjusted some of the order of the code so that my product Title & price sit above the product image.

However there is a large white space above the image (this space would have already been there, but looks odd when sitting so far below the title).

See screen capture:
highlight.jpg

Where/ how can i remove or reduce that space (highlighted yellow in attached image)?

Store: https://the-shiz-list.myshopify.com/
Pword: 4shizzle
Refrence: https://theshizlist.com/collections/nicolas-cages-face-on-things/products/home-decor-nic-cage-sequin...

0 Likes
tim
Shopify Expert
2858 117 937

This is an accepted solution.

Put this at the very bottom of your theme.scss.liquid asset:

.product__media-container {
    margin-top: 0 !important;
}
Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
TheShiz
Excursionist
13 1 3

Wow Tim, 

Thank-you, that is amazing!! I really appreciate your help

I was also hoping to have the product "description" to sit above the product "form" (when viewed in mobile format), and ideally to the left of the product "form" when viewed in desktop format.

Currently, the form (variant selection & add to cart button) are placed between the product image and product description on mobile, and sits to the left of the description in desktop.

Could you possibly assist? Would you prefer I make this a new thread elsewhere in the forum? 

Thanking you in anticipation! 

 

0 Likes
tim
Shopify Expert
2858 117 937

This is an accepted solution.

Try adding more CSS rules:

/* --tim: product page: swap places description/form */
.product__content-main {
    flex-direction: row-reverse;
}
@media only screen and (max-width: 749px) {
    .product__content-main {
        flex-direction: column-reverse;
    }
}

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
TheShiz
Excursionist
13 1 3

Jeez Tim,

You are fantastic!

I owe you a bottle of wine for the help you've given me today.

Thank you so very very much, I am so pleased with your assistance.

0 Likes
tim
Shopify Expert
2858 117 937

No worries!

Ha-ha -- please, send it to e-mail address in my signature (: in a digital form, of course!), or we can share it here (:

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
TheShiz
Excursionist
13 1 3

Haha, a virtual bottle of wine? Now that's a solution worth accepting! 

Okay jokes aside, I'm sorry to be such a noob, however I have one last question and then ill stop wasting your time.

I really like how it displays on my mobile phone with the cart/ form below the description.

How could I make the desktop to appear the same way, keeping the text centered and contained/ restricted to something like 600px width?

I hope its an easy fix, nothing that takes too long or too bothersome

0 Likes
tim
Shopify Expert
2858 117 937

Ok, comment that code out then and try this instead:

.product__content.page-width {
    max-width: 800px;
}
.product__content-main {
    flex-direction: column-reverse
}
.product__description, .product__form-container {
    width: 100%;
}

 

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes