Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • February 10, 2015 at 3:29 pm #393715
    rpl_admin

    Hi there,
    We just updated Enfold along with WordPress and Woo Commerce plugin (before attempting to move to a child theme). Having done so we’re seeing some undesirable layout changes:

    1. The page width seems to have got wider
    2. The single product page image seems bigger than before and seems to have thrown off the description and reviews tabs which should sit below (please see link below).
    3. The socket on the single product page is a different color to the rest of the site – I thought we had some css for this but if we have it’s not kicking in.

    Many thanks

    Robert

    February 11, 2015 at 12:01 pm #394238
    Yigit

    Hey rpl_admin!

    Please add following code to Quick CSS 

    #socket {
background-color: #666666!important;
}
.single-product-main-image {
width: 20%; 
}

    You can adjust the size of the product image by increasing/decreasing width value. Then please go to Enfold theme options > General Layout > Dimensions and change the width of the size as needed

    Best regards,
    Yigit

    February 11, 2015 at 1:52 pm #394322
    rpl_admin

    Hey Yigit,

    Many thanks for this. Still got the problem with the tabs – seem to be cut off on the left hand side, like there is a column covering the content (768 and above).

    Robert

    February 11, 2015 at 2:32 pm #394343
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    @media only screen and (min-width: 768px) {
#top div.product .woocommerce-tabs {
margin-left: 0 !important; }}

    Regards,
    Yigit

    February 12, 2015 at 4:27 am #394820
    rpl_admin

    Hi Yigit,

    Many tanks for this. It seems to have worked but previously the tabs box stretched the full width of the page but now it’s aligned to the text above it.

    Also, regarding the text above it – previously we had a green tick next to each of the features – those ticks have disappeared completely.

    Many thanks,

    Robert

    February 12, 2015 at 9:35 pm #395353
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    .single-product-summary {
overflow: visible;
}

    Cheers!
    Yigit

    February 14, 2015 at 3:54 pm #396156
    rpl_admin

    Hi Yigit,

    I’m afraid that hasn’t worked well – it puts the Tabs right but it also seems to place the Quantity and Buy Now buttons below the image and featured images.

    Do you think we need to contact Woo about their single product page template? Maybe we need to make some php changes?

    Many thanks,

    Robert

    February 16, 2015 at 10:53 am #396583
    Yigit

    Hi!

    Please use the code as following and it should work fine 

    .single-product-summary {
overflow: visible;
}
.template-shop div.product div.summary {
width: 60%; 
}

    Cheers!
    Yigit

    February 16, 2015 at 10:58 am #396586
    rpl_admin

    Hi Yigit,
    Many thanks for your reply. Currently we still have this code in the Quick CSS, are both of these still required?

    @media only screen and (min-width: 768px) {
    #top div.product .woocommerce-tabs {
    margin-left: -54%;
    margin-top: 2%;
    }}

    @media only screen and (min-width: 768px) {
    #top div.product .woocommerce-tabs {
    margin-left: 0 !important; }}

    Many thanks,

    Robert

    February 16, 2015 at 11:03 am #396589
    Yigit

    Hi!

    Yes, you can keep them. I just checked your website with the code i posted here applied – https://kriesi.at/support/topic/layout-issues-after-update/#post-396583 and it does work fine on all kind of screens

    Regards,
    Yigit

    February 16, 2015 at 11:13 am #396595
    rpl_admin

    Hi Yigit,
    I’m afraid that’s not working here. On 768 and above the text under the price (on the right of the main image) is being placed under the image, not under the price.

    Many thanks,

    Robert

    February 16, 2015 at 11:15 am #396597
    Yigit

    Hey!

    Just realised that i forgot to add float value, please add following as well 

    .template-shop div.product div.summary {
float: right; 
}

    Best regards,
    Yigit

    February 16, 2015 at 11:25 am #396603
    rpl_admin

    Hi Yigit,

    Thanks for your immediate reply. That last code works on above 768, but in 768 portrait this a lot of white space on the right of the image because the text is under the image. Also, the ‘60%’ means that the summary text at the top is very narrow on smaller screen sizes!

    Many thanks,

    Robert

    February 16, 2015 at 11:30 am #396607
    Yigit

    Hi!

    Do you mind creating a temporary admin login and posting it here privately?

    Regards,
    Yigit

    February 16, 2015 at 11:32 am #396609
    rpl_admin
    This reply has been marked as private.
    February 16, 2015 at 12:07 pm #396620
    Yigit

    Hey!

    Please review your website now, there was an unclosed curly bracket and i closed it and adjusted the code a bit

    Regards,
    Yigit

    February 16, 2015 at 12:11 pm #396625
    rpl_admin

    Hi Yigit,

    Looks good apart from at 768 portrait (769 is OK and below 768 is OK).

    Many thanks,
    Robert

    February 16, 2015 at 12:13 pm #396630
    Yigit

    Hey!

    Can you post a screenshot and show the issue please? I could not see anything wrong.

    Best regards,
    Yigit

    February 16, 2015 at 12:15 pm #396632
    rpl_admin

    Hi Yigit,

    The same issue as before – at 768px – the tabs don’t stretch the whole width, they align with the text above.

    Many thanks,
    Robert

    February 16, 2015 at 12:19 pm #396634
    Yigit

    Hey!

    Can you please review your website now? I changed media queries and set to be active on 768px instead of previous 769px

    Cheers!
    Yigit

    February 16, 2015 at 12:54 pm #396658
    rpl_admin

    Hi Yigit,

    Looks great. Yet again, many thanks for your excellent support.

    Cheers!
    Robert

    February 16, 2015 at 1:04 pm #396667
    Yigit

    Hi!

    You are welcome, we are always happy to help :) Let us know if you have any other questions or issues

    Best regards,
    Yigit

  • Author
    Posts
Viewing 22 posts - 1 through 22 (of 22 total)
  • The topic ‘Layout issues after update’ is closed to new replies.