Forum Replies Created

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter triplwu

    (@triplwu)

    Very interesting, thanks for letting me know! I removed it and it does seem to do the trick.

    That code snippet was used to subsitute a retina logo on displays that have a higher pixel density. I’ll subsitute the logo a different way. Thanks for your help!

    Thread Starter triplwu

    (@triplwu)

    Thanks for the reply. On OSX I’m using Safari, Chrome, and Firefox with the CSS displaying properly. Every browser on OSX looks pretty good from what I can tell, it just seems that Windows isn’t loading the styles that I’ve added.

    Here’s an example image with the view in OSX Safari and Windows Edge side by side.

    http://uvello.com/benepaytech/wp-content/uploads/2017/12/css-issue.jpg

    • The navigation bar is supposed to be set to 850px wide and float right.
    • The text in the image is supposed to be larger

    I know this isn’t an Edge specific issue because it shows up in Chrome and Firefox on Windows 10 for multiple users. Below is an example of the CSS that I’ve added to the child stylesheet that isn’t showing up.

    .bio-paragraph h3 {
      margin:0;
      padding:0;
    }
    
     #site-navigation {
      width: 850px;
      float: right;
      margin-top: 20px;
      position: absolute;
      right: 0;
    }
    
    .photo-text {
      font-size: 44px;
      font-weight: 400;
      line-height: 40px;
      color: #000;
    }

    Thanks so much for the replies. I figured something out that makes it work exactly how I envisioned it. It might be a little messy, but at least it works for the time being. That suggestion for float:none; and absolute positioning really helped me figure out what I wanted to do.

    Here’s what I ended up with in the slide.css file.

    .promo_slider_wrapper { margin:0; position:relative; height: 400px; z-index:-1000; overflow:hidden;}
    .promo_slider {height: 400px; overflow:hidden; position:relative; }
    .promo_slider img { left:50%; margin-left: -960px; padding:0; width: 1920px; height: 400px; position:absolute; float:none;}
    .promo_slider .panel { background:url('images/slide.png'); display:none; float:left;

    Thanks again rcain for your updates to this plugin and a big thanks to woodent for making IMO one of the best slider plugins for WordPress.

    -Trip

    Thanks for sharing this awesome update to a great slider. I’ve been trying to get something like this to work for quite awhile.

    Is there any way to have the width at full screen, but the height of the image at a fixed size? I’m trying to modify this to show 400px high images that will extend the full width of the browser, but without compressing or “squishing” the image when the browser isn’t as large as the image size.

    Here is what I have in the slide.css file.

    .promo_slider_wrapper { margin:0; position:relative; height: 400px; z-index:-1000;}
    .promo_slider {height:400px; overflow:hidden; position:relative; }
    .promo_slider img { margin:0; padding:0; width: 1920px; height: 400px;}
    .promo_slider .panel { background:url('images/slide.png'); display:none; float:left;

    This shows the image in proportion, but it does not allow it to align to the center of the screen anymore. Thanks so much for your time.

    -Trip

Viewing 4 replies - 1 through 4 (of 4 total)