Prestige Theme - Product Description Overlapping With Review Section & Recently Viewed

[LadyP]

Hello,

I hope someone can help. I have the Prestige Theme, version 1, I believe, and the Product Description & Specification section overlaps with Review Section & Recently Viewed. I have noticed this tends to be the case when the description or specifications section is long.

Here are some images below of the issue:

 

I would also love to have the Product Description & Specification sections be under the product image instead of to the side, so that it is wider.

[suyash1]

@LadyP- this will need code editing, can you please share your page link where you have this issue?

[LadyP]

Hello @suyash1 this issue is in every product page where the description or specification is long. Here is an example of one.

I sincerely hope this is something that can be easily resolved. 

[suyash1]

@LadyP- we will need to make multiple settings to make it like this

[LadyP]

Okay. What will these settings be?

[suyash1]

@LadyP- please add given css to the very end of your theme.scss.css file and check, then we can make more adjustments needed

@media screen and (min-width: 1008px) {
  .Product__InfoWrapper {position: initial;}

.template-product .Product__Wrapper{display: flex; max-width: 100%;}
}

[LadyP]

To verify I am inputting the given code after the end of what is circled in the picture below?

[suyash1]

@LadyP- yes... after the last "}"

[LadyP]

Okay. I have added it.

[suyash1]

@LadyP- it is not overlapped on my screen now

[LadyP]

I just checked and the overlapping issue seems to be fixed.

Thank you!

Will the next steps you mentioned be about getting the description to be under the product image instead of to the right?

[suyash1]

@LadyP- do you want text under image?

[LadyP]

I am not sure if by text under image we are referencing the same thing, however, I am thinking something similar to this if a simple coding will fix it, where the product information is below the product image like below from this website.

[LadyP]

I believe we are talking about the same thing. But yes, I want for the product information to be below the product information if a simple coding can fix it. Similar to the below image from this website.

[LadyP]

Okay. I have posted my response twice only to see it disappear. Not sure what is going on but I will try again.

I want for the product information to be below the product image if a simple coding can fix it. Similar to the below image.

[LadyP]

@suyash1 Okay now I have an even bigger problem. While the code given took care of the issue with overlapping, it now has caused my product images to no longer show and I am in the middle of running ads!

Below is the image of what is seen in place of the product images. I am going to remove that code for now until a better solution can be provided.

[LadyP]

I also see the following message in the theme editor:

SCSS support is deprecated in themes

Convert .scss and .scss.liquid files to .css or .css.liquid for a better performing online store and theme editor.

Could this be the reason why the provided code caused my product images to disappear? I really want to get this resolved as quickly as possible. Please anyone who can help kindly advise.

[suyash1]

Yes sure, please remove the code, actually it should not remove images but
must be getting conflicted with some other code