Featured Content Area Resizing

  • Author
    Posts
  • #156741
    tmwilliams37
    Member

    Hi,
    On my front page, I am wanting the header and featured background image slider to be sized at a width of 20% and 80% respectively. I’ve managed to get the header sized properly but the background image never scales properly. In stead of showing the whole image as the browser window gets larger, the image gets cropped and magnified after a certain point. I’ve tried everything I can think of. Is there a way to keep the header from floating on top of the featured images or change the size of the featured content area? I effectively just want 20% of the front page to be header and 80% to be the featured image similar to the rest of my site.

    Thank you,
    Tessa

    The blog I need help with is: (visible only to logged in users)

    #156747
    vivawpthemes
    Theme Author

    Hi Tessa,

    The background image will resize and crop to maintain ratio. That is normal in responsive design when you want to cover the whole browser window.

    Thanks,
    Edy

    #157561
    tmwilliams37
    Member
    Original poster

    Thank you for your reply.
    Maybe I can explain my issue better. I totally understand the cropping and resizing for responsive design, and I don’t have an issue with that part. I’m wondering how I can stop the side navbar from floating on top of the background image. I want the left edge of the background image butted up against the right edge of the navbar. Right now every background image spans the entire browser window and is partially covered by the side navbar. The image doesn’t need to span the entire width of the browser window. I just need to fill the space between the right edge of the navbar and the rest of the browser window cropping and resizing responsively from there. Hopefully, that helps explain my issue better.

    Tessa

    #157564
    vivawpthemes
    Theme Author

    Hi Tessa,

    It could work with this css code

    body .mc-cycle {width: 76%!important; left:auto; right: 0;}

    To have it cover the full browser in mobile use this css code.

    @media screen and (max-width: 1120px) {
          body .mc-cycle {width: 100%!important; left:0;}
    }

    Let me know if any problem.

    Thanks,
    Edy

    #157582
    tmwilliams37
    Member
    Original poster

    Edy,

    This works perfectly for the front page. Thank you so much! Now is there a way to do the exact same thing for the background images on my other pages? Specifically the fixed background images on the “Home” page?

    Tessa

    #157583
    tmwilliams37
    Member
    Original poster

    Sorry, there is one issue. When I come out of full-screen on the “Home” page, the button to collapse the content area comes back and the content area goes back to its original size even though I added additional css earlier to remove that feature.

    Tessa

    #157587
    tmwilliams37
    Member
    Original poster

    I apologize again disregard the last message about the button coming back. The Word Press editor was just messing up.

    Tessa

    #157589
    vivawpthemes
    Theme Author

    Hi Tessa,

    I am not seeing any other page where you are using the featured image as a background. Can you please point me at one?

    Thanks,
    Edy

    #157612
    tmwilliams37
    Member
    Original poster

    Oh, the images I’m referring to are being used as background images for cover blocks on my home page, so I think that makes my question unrelated to the Soho theme. Thank you for your help with the featured image though. I appreciate your quick responses.

    I do have a second question though. Is there a way to download the Soho html theme files to make changes to that aspect of the code?

    Tessa

    #157659
    vivawpthemes
    Theme Author

    Hi Tessa,

    No, that is not possible unfortunately.

    Thanks,
    Edy

  • The topic ‘Featured Content Area Resizing’ is closed to new replies.