Aligning and resizing columns .col-md-7

  • Resolved jamesscaife

    (@jamesscaife)


    8 years, 9 months ago

    Hi Guys

    I have .col-md-7 on the right of my product page and .col-md-5 on the left.

    I really need to extend the column on the right further down the page, but not push any .col-md-5 any further down the page, I want to make it sit alongside it, not below. There is also .col-md-12 below both, I’d like to have this sit under .col-md-5 again alongside .col-md-7, as below…

    PRODUCT IMAGE .col-md-7
    PRODUCT IMAGE .col-md-7
    .col-md-5 .col-md-7
    .col-md-5 .col-md-7
    .col-md-12 .col-md-7
    .col-md-12 .col-md-7

    I really need help, but for the small changes I need to make and really cannot afford a developer for the small changes that need to be made.

    KR

    James

Viewing 15 replies - 1 through 15 (of 28 total)

  • Your images haven’t linked.

    Please post the url to a relevant page.

    Thread Starter jamesscaife

    (@jamesscaife)

    Hi Lorro

    That was just text to illustrate, an image can be seen here: https://goo.gl/photos/nM9QnWWr4qgGrLRv8

    The alignment on the product pages needs to be altered (see image):
    1.The tabs section ‘Infomation”Shipping Infomation”Reviews’ needs to always appear 30px below the thumbnails on the left – note that the column on the right must run next to this. and freeze when scrolling down the page once the product description is at the top of the page, similar to this: https://www.nest.co.uk/product/cassina-g-s-a-dining-table
    2.The ‘You may also like’ needs to be shrunk down to the same width as the tabs above and again the column on the right with the product description in needs run parallel with this.
    3.The column on the right needs to extended to the ‘Complete the look’ carousel.

    I can’t lift maintenance mode as we have many suppliers keeping a close eye on the progress of the site

    Really appreciate your time, thank you! ??

    KR

    James

    I understand what you would like to achieve. Page markup varies by theme, and to be able to make an attempt using custom css it would be necessary to examine and experiment on the live page using browser tools. It is not possible to work from an image. Please feel free to come back here after your site is live.

    I am not hopeful that realignment to the extent that you want will be achievable using css. If so, it would be necessary to rejig the page template, but the time and debugging effort needed is more than is practical for a forum answer.

    Thread Starter jamesscaife

    (@jamesscaife)

    Hi Lorro

    This is the theme we’re using, here is a link to the page needing the chnges mentioned above, what do you think?

    https://themes.kadencethemes.com/virtue-premium/product/homebrew-hoodie/

    Try this custom css:

    @media only screen and (min-width:768px) {
#content div.product .row {
  position:relative
}
#content div.product .product-summary-case {
  position:absolute;
  right:0;
  height:1350px;
  background-color:#eef;
}
#content div.product .woocommerce-tabs,
#content div.product .related {
  width:41%;
}
}

    The height and background-color lines are just to reveal the space taken by the summary element. Remove these lines when you have actual content to fill the space.

    Custom css goes in Theme Options > Advanced Settings: Custom CSS Box.

    Thread Starter jamesscaife

    (@jamesscaife)

    Lorro! Amazing amost there, thank you, you are the first person to make some progress with me! Over the moon, that said there’s the matter of the scroll function which I’ve outlined in the images below:

    https://drive.google.com/file/d/0B3eyTCsPr9UoOTBiNGhpZmQtQ1U/view?usp=sharing
    https://drive.google.com/file/d/0B3eyTCsPr9UoTW83b3lPQ0loTGc/view?usp=sharing
    https://drive.google.com/file/d/0B3eyTCsPr9Uob0FaV3Yta29XTzQ/view?usp=sharing
    https://drive.google.com/file/d/0B3eyTCsPr9UoVnFqYzlOeHdWR3M/view?usp=sharing
    https://drive.google.com/file/d/0B3eyTCsPr9UoN1phNVFkdU03eUE/view?usp=sharing

    This outlines a summary and then focuses in on the journey when scrolling.

    A working example can be seen here:

    https://www.nest.co.uk/product/kartell-masters-chair

    Really looking forward to hearing your thoughts! ??

    KR

    James

    As I understand it, you want the summary block to stay in view. You will need a javascript to adjust the top property as the window is scrolled:

    var summary = document.getElementsByClassName("product-summary-case")[0];
window.onscroll = function() {
  summary.style.top = window.scrollY + "px";
};

    Thread Starter jamesscaife

    (@jamesscaife)

    Sorry for being rubbish Lorro, where do I put this?

    Make it into a plain text file and put it at:
    /wp-content/themes/virtue_premium_child/set_summary_top.js

    Next, load it into your pages with this snippet in your child theme’s functions.php

    <?php
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
  wp_enqueue_script( 'my-js', '/wp-content/themes/virtue_premium_child/set_summary_top.js', array(), "1", true);
}

    Works for me, but if it doesn’t work for you I’d have to see your site when its public to be able to debug it.

    Thread Starter jamesscaife

    (@jamesscaife)

    Hi Lorro,

    sorry you’ve lost me:

    Make it into a plain text file and put it at:
    /wp-content/themes/virtue_premium_child/set_summary_top.js

    I dont understand this.

    Use Notepad.exe and paste in the javascript lines. Save as a file called “set_summary_top.js”. Upload same using ftp or your host’s file manager software to:
    /wp-content/themes/virtue_premium_child/set_summary_top.js

    Don’t use Microsoft Word to make the file because it puts extra stuff in that we don’t want.

    Thread Starter jamesscaife

    (@jamesscaife)

    Hi Lorro

    Thank you for bearing with me, I’ve followed these instructions exactly and have got the following error:

    Parse error: syntax error, unexpected ‘<‘ in /home4/james/public_html/olsonbaker.com/wp-content/themes/virtue_premium-child/functions.php on line 107

    The <?php and ?> come in pairs. My snippet to load the javascript should be after a <?php but before a ?>. A closing ?> at the end of the file is not required.

    If that doesn’t address the problem, paste your functions.php here:
    https://pastebin.com/
    You can paste as a guest, then paste just the link back here.

    Thread Starter jamesscaife

    (@jamesscaife)

    Hi Lorro

    I tried this and it’s still not working:

    https://pastebin.com/6S8JDtAq

    Take out the <?php at line 107.

    PHP is already active at that point, so no need to switch it on again.

Viewing 15 replies - 1 through 15 (of 28 total)
  • The topic ‘Aligning and resizing columns .col-md-7’ is closed to new replies.