Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • September 27, 2017 at 12:47 pm #857474
    nadinedomnink

    Hi, is it possible to create some space between image (left hand side) and text (right hand side) on the product page? I want the right part of the two columns be lined up with the logo”paukersliebling”. A gap of around 50px would be great! Thanks a lot!
    See: http://www.paukersliebling.de/produkt/default/

    September 27, 2017 at 12:58 pm #857477
    nadinedomnink

    This image helps you to understand what I mean:
    https://ibb.co/e9O6W5

    Thanks a lot!

    September 27, 2017 at 6:43 pm #857672
    Victoria

    Hi nadinedomnink,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (min-width: 990px) {
  .template-shop div.product div.summary {
      margin-left: 50px;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    September 29, 2017 at 11:24 am #858424
    nadinedomnink

    hi, this doesn’t work as the text disappears on the right. see image: https://ibb.co/niKN5b

    thanks!

    October 2, 2017 at 4:56 am #859057
    Ismael

    Hi,

    Increase the right margin of the product container.

    .single-product-main-image {
    margin-right: 100px;
}

    Adjust the value as needed. You might need to use a lot of css media queries to adjust the margin on different screen sizes.

    Best regards,
    Ismael

    October 2, 2017 at 11:43 am #859172
    nadinedomnink

    As it seems to me the margin between image and text changes…100px is perfect to have logo and text lined up but the text on the right is still incomplete…thanks

    October 3, 2017 at 9:51 am #859539
    Ismael

    Hi,

    What do you mean by “incomplete”? Please provide a screenshot. Also note that the width of the main container will change based on the width of the screen size so you have to adjust the right margin with css media queries. Example:

    @media only screen and (max-width: 1366px) {
    .single-product-main-image {
        margin-right: 50px;
    }
}

    The css code above will adjust the right margin to 50px if the screen or monitor resolution is less than 1366px.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.