Designing a responsive website

R

RiskyRyan

New Member
Feb 17, 2015
15
0
Hey guys,
making my portfolio website currently, I know all my CSS3 designing stuff and back-end management blah blah get the point I'm good at PHP all that. But I've never attempted making a responsive website. I need some tips, tricks and techniques which could help my site fold in.

I have already began development on this little project of mine:
Code: 
<div class="logo">
    <span class="logo-text-red">Ryan</span>
    <span class="logo-text-white">Squalky</span>
</div>
This text is going to be 40px but I need it to automatically re-size to a correct px so that it automatically fits any device. (
You must be registered for see links
)
 
Last edited:
Sort by date Sort by votes
RastaLulz

RastaLulz

fight teh power
Staff member
May 3, 2010
3,926
3,921
Use
You must be registered for see links
that are provided in CSS3.

Here's how you'd change the font-size when the screen is smaller than a specific width:
Code: 
@media all and (max-width: 245px)
{
    .logo
    {
        font-size: 25px;
    }
}

The CSS provided will change the font-size to 25px when the window is less than or equal to 245px wide.
 
Upvote 0 Downvote
Jemz

Jemz

xmas tings.
Aug 6, 2013
166
17
I might be wrong but
HTML: 
<meta name="viewport" content="width=device-width, initial-scale=1" />

putting that in the <head> will also sort it for you.
 
Upvote 0 Downvote
brsy

brsy

nah mang
May 12, 2011
1,530
272
Saintz said:
I might be wrong but
HTML: 
<meta name="viewport" content="width=device-width, initial-scale=1" />

putting that in the <head> will also sort it for you.
Click to expand...
That isn't as specific as using media queries. Media queries is definitely the way to go; I've used media queries for every mobile website I've ever done, and it works fine. It may seem like a lot more work but it actually is worth it.
 
Upvote 0 Downvote
R

RiskyRyan

New Member
Feb 17, 2015
15
0
kodeAnt said:
That isn't as specific as using media queries. Media queries is definitely the way to go; I've used media queries for every mobile website I've ever done, and it works fine. It may seem like a lot more work but it actually is worth it.
Click to expand...
Did you have to versions of your site coded? One for desktop and one for mobile seperatly coded?
 
Upvote 0 Downvote
brsy

brsy

nah mang
May 12, 2011
1,530
272
RiskyRyan said:
Did you have to versions of your site coded? One for desktop and one for mobile seperatly coded?
Click to expand...
I had one main css files, just different media queries defining the width/height of specific elements like the img tag, or hiding specific elements that would be too time consuming to make mobile-oriented.
 
Check this out.

You must be registered for see links

 
and this..
You must be registered for see links
 
Upvote 0 Downvote
Sysode

Sysode

Front-End Developer
Dec 11, 2012
1,673
848
kodeAnt said:
That isn't as specific as using media queries. Media queries is definitely the way to go; I've used media queries for every mobile website I've ever done, and it works fine. It may seem like a lot more work but it actually is worth it.
Click to expand...
What @Saintz quoted is still needed in responsive web design, it is to be used alongside media queries.

I think it's important to get your head around what media queries are and how they actually work.. To put it in simple terms, it's basically recoding the elements of your site that do not work on particular devices. You come to learn the dimensions of these devices and then you can start using the ones that matter most. Obviously there are "preferred" ways to code CSS but to start, I think it'd be best to get your head around how they work and they are capable of doing.

If you require any help, I'm sure the helpful community will assist Kappa .
 
Upvote 0 Downvote

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)
☀️  Switch to Light Theme

Latest posts

Top