WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] resizing issue (18 posts)

  1. dmd54
    Member
    Posted 1 year ago #

    extra eyes please. trying to figure out why the background image in the slider is not resizing as are the other images when adjusting screen widths?

    http://macrodiver.com

    thanks

  2. Media X
    Member
    Posted 1 year ago #

    Adjusting just fine at my end.
    The only difference is the orientation of the images (landscape and portrait).

  3. Andrew
    Forum Moderator
    Posted 1 year ago #

    I had to add padding to see your slider background image and yes, it was not resizing like the other images. It was skewing.
    Hopefully this CSS should stop that:

    background-size: 100%;
  4. dmd54
    Member
    Posted 1 year ago #

    ok - tried the background size but it wasn't working.

    If you can, take a look now. the background is there and both slider and bg are resizing but the slider is being pushed below the background image. is that the right way to do this? then use a negative margin to position the slider?

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    You can do what you had before, have it a background image instead of an actual <img>. That's the correct way.
    Alternatively use absolute positioning.

  6. dmd54
    Member
    Posted 1 year ago #

    I'm sorry but I don't get what's going on. I put it back in as a background image under the featured image div but now it again does not resize properly.

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    I don't see a background-size style in your stylesheet (if that's where you're making the change)

    It should be on this style;

    #featured-image
  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try making your changes through this plugin http://wordpress.org/extend/plugins/custom-css-manager-plugin/

  9. dmd54
    Member
    Posted 1 year ago #

    I am editing in the site style sheet.

    #featured-image {
    margin: 10px 10px 35px 10px;
    background: url("http://macrodiver.com/wp-content/themes/macrodiver/images/slide-bgsm.png");
    background-size: 100%;
    }

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    I tested it out by adding padding of 50px to #featured-image and resizing the browser. I could not find an issue [screenshot].

    The only issue I can see, which is easily resolvable as you know, is the repeated background.

    Are you looking at a particular browser?

  11. dmd54
    Member
    Posted 1 year ago #

    All right. It works full screen but the padding is too much when resized for mobile.

    thanks for the help.

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    Remember, padding, just like any other value, can be added using pixels, percentages, em, centermetres, inches, etc. I think percentages or em will be suitable.

  13. dmd54
    Member
    Posted 1 year ago #

    yeah, I've tried every possible way I can think of and no combination seems to get it working both ways. Beyond frustrated.

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    If all fails you can just use a media query to remove/reduce the padding at mobile size:

    @media all and (max-width: 480px) {
    
    }
  15. Media X
    Member
    Posted 1 year ago #

    I would suggest playing around with the padding for the title under the slider image. It has 40px top padding. I'll post the css solution as soon as i load your site. Seems like you're workin' on it and it's wont load atm.

  16. dmd54
    Member
    Posted 1 year ago #

    thanks - i'll try adjusting the padding on the title.

  17. dmd54
    Member
    Posted 1 year ago #

    ok. tried that, tried everything. don't think it's possible to do what i'm trying to do. the slider just will not position properly with the background image.

    thanks for the suggestions.

  18. dmd54
    Member
    Posted 1 year ago #

    All right. I got it. Had to adjust the image by adding a white border, then styled the featured image

    margin: 0 auto;
        max-height: 478px;
        max-width: 920px;
        padding: 0;
        position: relative;
        top: 0;

    ...and slider container

    left: 1px;
        margin: 25px auto;
        max-height: 478px;
        max-width: 920px;
        position: relative;

    this allowed me to lose all the padding that was overtaking the image at a mobile screen size.

    Again, thanks for helping out.

Topic Closed

This topic has been closed to new replies.

About this Topic