• sumbooty

    (@sumbooty)


    Hi! I’m trying to duplicate the following demo site (notice the full width slider and banner further down below on the main page). Despite any changes, I have yet to achieve this.

    Here’s the site that I’m trying to duplicate:
    Demo site

    Here’s my current site:
    New website

    Any help will be much appreciated. Thank you!

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • egf

    (@egf)

    THere’s an explicit width on your slider image of 1200px. And a max-width of 1200px on the container. If you can update these your slider will be full width.

    Thread Starter sumbooty

    (@sumbooty)

    Thanks for the info egf. Where would I change this value? The image is just a URL inside layout creator and so I haven’t explicitly set that value myself. What is the name/class of the container? thanks

    egf

    (@egf)

    Looks like if you remove the max-width on this div <div class=”homebuilder builder container”>. And set the width of .flex-active-slide img to 100% your image will span the entire browser.

    Thread Starter sumbooty

    (@sumbooty)

    Thanks again for all your help. I searched all php and css files for this class. I found the “Homebuilder Builder Container” all by itself within homepage.php. However it has no max-width. It looks like this:

    <?php
    /*
    Template Name: Builder
    */
    ?>
    <?php get_header(); ?>
    <div class=”homebuilder builder container”>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <?php the_content(); ?>
    <?php endwhile; endif; ?>
    <div class=”clearfix”></div>
    <?php get_footer(); ?>

    Where else might I look?
    I was able to add .flex-active-slide img to 100% inside the style.css. But I guess no change will come until we can make the container larger

    egf

    (@egf)

    For lack of anything else to do to fix this. Just add a css line that negates the max-width. Something like .homebuilder {max-width: 100%;} Maybe need an !important in there to make sure it works depending on when/where the original CSS is getting set.

    Thread Starter sumbooty

    (@sumbooty)

    PROGRESS!!! The container was made larger by adding the above suggestion. Thank you!
    The picture however, is not full width. The picture size is 1940×875 but somewhere it’s being constrained to 1600×450. Where might I look for that?

    Also, when I right click on the image and select view image, the url has an additional explicit property set, resize (?resize=1600%2C450). How can I remove that?

    https://i2.wp.com/wordpress.cityofatlanticcity.org/wp-content/uploads/2017/05/ACSkyline_1940x875.jpg?resize=1600%2C450

    Thanks again!

    egf

    (@egf)

    The url parameter ?resize is probably from the WordPress media settings. If you go to Settings > Media, check what the largest image is set at (I’m guessing it’s 1600). You can change that size to whatever you want the max image size to be. Then you’ll want to install a plugin called Regenerate Thumbnails and run that after you make the change for the image sizes.

    Thread Starter sumbooty

    (@sumbooty)

    Thank you egf! Following your suggestion, I was finally able to resolve the issue without having to install an additional plugin. Here’s what I did:

    First, I did go to the media settings and uncheck all the additional picture sizes it duplicates. However, since I had already uploaded this picture some time ago, it had already created duplicates in, different sizes, in the uploads/2017/month folder. So I had to manually remove these duplicates from there.

    I then modified the Functions.php, which is where the inline “?resize” is added, to the size I wanted.

    I then found an error in my style.css. I was using Max-Width:100% in the .Flexslider class instead of just Width:100%.

    Lastly, I tweaked the floating text “Top” property from a hardcoded value Top:305px to Top:75%, so that it renders the same in most browsers.

    PS. To modify the banner further down below, I modified the vertical padding in Appearances->Layout Creator

    Thanks again egf! ??

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Make slider/banner full width’ is closed to new replies.