Support » Theme: Typecore » Change through @media doesn’t work

  • vlcina

    (@vlcina)


    Hello. I want center header and footer image. I tried this code on header and footer image, but it doesn’t work. T tried deskop float:left and mobile float:right, but too doesn’t work. Can you please help me?

    This is code in styles.css:

    /* deskop left */
       .stred-mobile { 
    	   float: left; 
    	}
      /* when screen is less than 719px wide
         change to mobile version to center*/
    @media only screen and (max-width: 719px) {
    	.stred-mobile { 
    		float: none;
    		margin: auto
    	}

    This is code in header.php:

    <?php if ( get_header_image() ) : ?>
    					<div class="site-header">
    						<a href="<?php echo esc_url( home_url('/') ); ?>" rel="home">
    							<img class="site-image stred-mobile" src="<?php header_image(); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
    						</a>
    					</div>
    				<?php endif; ?>

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • saurabh.dhariwal

    (@saurabhdhariwal)

    Hello vlcina,

    Try below css code.

    .stred-mobile {
      float: none;
    }
    
    .site-image {
      padding: 0;
    }
    
    .one-half {
      width: 100%;
    }
    
    #footer-bottom #footer-logo {
      margin: 0 auto;
    }
    
    #footer-bottom #copyright, #footer-bottom #credit {
      margin-top: 12px;
      text-align: center;
    }

    Hope this will helps you.

    Thanks.

    Hello, Thank you.

    Now this code work:

    /* header modification */
    .stred-mobile {
      float: left;
    }
    
    @media screen and (max-width: 810px) {
    	.stred-mobile {
      float: none;
      padding: 0;}
    }

    It’s works on my Android phone with Chrome browser, but not enough with opera browser not. It’s still using normal .stred-mobile on height, but when I rotate my phone on width it’s using stred-mobile in @media screen… .
    Footer is automatic modified on phone without my change.

    And I see I have to change any view port from 720px to 810px in navigation panel because of this:
    https://i.imgur.com/8jcWIxq.png
    Do you know which, please?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Change through @media doesn’t work’ is closed to new replies.