Mobile Optimisation: Text and Background Images

Support Area Forums Elite Mobile Optimisation: Text and Background Images

Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
URL to the page in question: http://www.kimatics.com
  • Author
    Posts
  • #33992
    Avatar photoJulian Maier
    Participant

    Hi Bill,

    i’d like to make my site more mobile-friendly, thats why i want:

    1) To make the font size smaller for mobile screens
    (as the Headlines on my homepage wont fit in the screen-size)

    I already inserted this snippet into the custom-css, but nothing has changed:

    @media only screen and (max-width: 520px) {

    body .content-area h2 {
    font-size: 16px !important;
    }

    .content-area p {
    font-size: 14px;
    }

    }

    2) To make the Background images of the Home-Block more suitable for the mobile screens (especially smartphones)
    Right now it looks good on big screens but when i open the page on my iPhone,
    it seems that there is just a random part of the background image shown, its just not recognizable anymore.

    Hope you can help me out 🙂

    Thanks and Cheers,
    Julian

    #34007
    Bill Robbins
    Moderator

    Hi Julian,

    Good questions. Let’s see if we can help you out here.

    1. You can change the font sizes on smaller screens. Let’s change the CSS there to this:

    
    @media only screen and (max-width: 520px) {
    
    	h2 {
    		font-size: 16px !important;
    	}
    	
    	p {
    		font-size: 14px !important;
    	}
    
    }	
    

    I noticed in the code of your home page, that a size is set for most of the paragraph text inside of the widgets there. Those inline font sizes are going to keep the media query from overriding the size on smaller screens. You’ll need to take those out and something like this to the Custom CSS to control the size of the paragraph text there:

    
    @media only screen and (min-width: 521px) {
    
    	.home .widget p {
    		font-size: 18px;
    	}
    
    }
    

    You can replace background images based on screen size. To do that, first upload the image you’d like to use in the media library. Once the upload is finished, WordPress will give you the URL to that file. Copy that, you’ll need it in a minute.

    Then go to the custom CSS box in your theme options page and add this:

    
    @media only screen and (max-width: 520px) {
    
    	div#home-one {
    		background-image: url(https://yoursite.com/image.jpg);
    	}
    
    }
    

    Replace the http://yoursite.com/image.jpg with the URL to your image. That snippet will change out the background image in the first home page block when the screen is 520 pixels wide or less. You can change the 520 in that snippet to adjust the point at which that changes. You can change the #home-one to #home-two to target the second block and so on.

    Hope that helps out.

    Have a great week,
    Bill

Viewing 2 posts - 1 through 2 (of 2 total)
  • The topic ‘Mobile Optimisation: Text and Background Images’ is closed to new replies.