Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

HTML, CSS, Change content on mobile

Posted on 2013-06-02
2
Medium Priority
?
190 Views
Last Modified: 2013-09-16
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
Comment
Question by:R8VI
2 Comments
 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39214311
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
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 2000 total points
ID: 39214319
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: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

824 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question