WordPress.org

Ready to get started?Download WordPress

Forums

[Theme: Header, Responsive, CSS] Image fails to resize (1 post)

  1. ArTiqR
    Member
    Posted 1 year ago #

    The theme header doesn't follow the page width, which results in a blurry/cropped image when the website is viewed on a small monitor or mobile device. {as show in the pictures below}

    Link to: Normal PC browsing view
    Link to: Mobile device view w/ problem
    {Green line shows intended image placing}

    CSS header

    .art-header
    {
       margin: -5px 0 0 -5px;
       height: 40px;
       background-image: url('images/header.png');
       background-position: 0 0;
       background-repeat: no-repeat;
       position: relative;
       z-index: auto !important;
    }
    
    .responsive .art-header
    {
    background-image: url('images/header.png');
    background-position: center center;
    max-width: 97.5%;
       /* max-width: 480px; */
    
    }
    
    .art-header>.widget
    {
       position:absolute;
       z-index:101;
    }

    Link to: Page(s) where the problem occurs

    Does anyone have a solution to fix this? Thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic