Have Product description NEXT to image in responsive

[JimmyV]

I have modified the default responsive template in 1.5.6 and it is great except what I really want is when in desktop mode for the image to be on left with product description next to it. I should know what is controlling that "return" that places it on the line below but I can't locate it.

Figured asking would solve it today versus me struggling
Like this page...

[mc12345678]

I can't help with the CSS that likely is involved because I am on a mobile device, but generally what helps best is to provide a link to a specific product/page where a solution is sought. Then those that have access to the proper tools can easily advise how to incorporate the desired change for the desired view...

[keneso]

In templates/tpl_product_info_display.php

find around line 75
<!--bof Product description -->
... <code> ...
<!--eof Product description -->

and put it right under
<div id="pinfo-right" class="group grids">

[mc12345678]

In templates/tpl_product_info_display.php

find around line 75
<!--bof Product description -->
... <code> ...
<!--eof Product description -->

and put it right under
<div id="pinfo-right" class="group grids">

Wouldn't that affect all display views, not just the desktop view as indicated in the OP?

[dbltoe]

Wouldn't that affect all display views, not just the desktop view as indicated in the OP?

Succinct and correct.

A link to the page is the best way to help us help you.

[keneso]

Wouldn't that affect all display views, not just the desktop view as indicated in the OP?

Yep, sorry about misreading it.
It will put the description before the price, attributes, etc. in smaller screens.

<div id="prod-info-top">
<div id="pinfo-left" class="group">
    image
</div>
<div id="pinfo-right" class="group grids">
    price
    attributes
    etc. 
</div>
</div>
<div id="productDescription" class="productGeneral biggerText">
    product description
</div>

[keneso]

Try the moving with this css

add display flex
#pinfo-right {
float: right;
width: 55%;
padding: 20px 0 0 0;
display: flex;
}
and add order to
#productDescription {
padding: 0.5em;
clear: both;
margin: 20px 0;
line-height: 150%;
order: 5; /* the number based on your need, and other id/classes in the#pinfo-right */
}

[keneso]

I should stop reading and posting after 2am

The previous should have been

add display flex

#pinfo-right {
float: right;
width: 55%;
padding: 20px 0 0 0;
display: flex;
}

and add order to #productDescription
in a conditional
@media ... based on at what size you would like it to move

#productDescription {
padding: 0.5em;
clear: both;
margin: 20px 0;
line-height: 150%;
order: 5; /* the number based on your need, and other id/classes in the#pinfo-right */
}

[mc12345678]

I should stop reading and posting after 2am

That urge to be helpful always makes it difficult though, doesn't it? :)
Go to bed...

[JimmyV]

I will try these at least it gives me a target.

Specific to this post I didn't get overly specific because its default out of box and we all see it on every install and the entire product layout is a problem.

I want all the listings compacted into a tight horizontal space not spread out 1000px tall. This results in 4-8 products on a tablet screen 8-10 on a large laptop v current templates 2-3.

So while I asked about description I was going to use that to modify the entire layout for screens over 7" and this was to point me to the code.

Will advise if I figure a solution. I am a firm believer that Amazon knows what best strategies are so I try to maximize total content in a screen and it's absolutely working but to convert to this template I need to smush content some 80% v current layout. Even mobile takes up way way too much vertical space but that appears to be a simple solution of padding and margins etc v this more global restructure.

Thanks very much! Appreciate the direction if anyone thinks of a better way LMK