• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 195
  • Last Modified:

HTML, CSS, Change content on mobile

Hi,

I have the below code, what I want to do is change the size of the Title which is The S R and remove the logo if someone is using a mobile device, please help how can I do this

     <div class="row" style="border-left: 1px solid black; border-right: 1px solid black;
            background-color: Black; font-family: Georgia,'Times New Roman',Times,serif;">
            <div class="large-12 columns" style="color: White; font-weight: bold; font-size: 65px;
                padding-top: 10px; padding-bottom: 10px; padding-left: 10px; ">
                <img src="images/Email.gif" alt="Logo" style="padding-right: 25px;" />
                The S R
            </div>
        </div>

Open in new window


If this mean creating another CSS file thats fine as well I need to know how to detect the mobile device and use the CSS accordingly

Thanks

R8VI
0
R8VI
Asked:
R8VI
1 Solution
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
Try this...

HTML
     <div class="row" style="border-left: 1px solid black; border-right: 1px solid black;
            background-color: Black; font-family: Georgia,'Times New Roman',Times,serif;">
            <div id="header" class="large-12 columns" style="color: White; font-weight: bold; font-size: 65px;
                padding-top: 10px; padding-bottom: 10px; padding-left: 10px; ">
                <img src="images/Email.gif" alt="Logo" style="padding-right: 25px;" />
                The S R
            </div>
        </div>

Open in new window




CSS:
@media only screen and (max-width: 500px){
   #header img{
         display:none;
    }
    #header{
          font-size: 40px !important; // Change it acc. to you... 
     }
}

Open in new window



This is done with media queries... See here... a good tutorial on it...
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
0
 
COBOLdinosaurCommented:
detecting the device is not reliable, and can cause more problems than it solves.  What you need to do is detect the device characteristic and present alternate CSS using media queries

Cd&
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now