CODEWITHSUNDEEP
jqueryhtmlcss
Power fuse0
Power fuse0

Reputation: 5

Responsive design, Positioning elements?

I'm trying to create text elements that are stuck together. When you resize the window the elements maintain the same position relative to each other. For instance, in the example below C stays under P. If I used a wrapper the site won't work with multiple browser sizes. Is there a way to put it in a fixed place where it moves along with the window?

Here is an example: (Chris Carpenter) (creative design) http://chris-carpenter.co.uk/

Is it possible to do this with jQuery?

.creative {
text-align: center;
font-size: 40px;
color: #dce0df;
font-family: brush;
}


.chris {
text-align: center;
font-family: helv2;
font-size: 72px;
line-height: 300px;
}

This might explain it a little better

https://i.sstatic.net/iM8r6.jpg

So i want the position of both text elements to stay the same in relation to eachother when you resize the windows.

Upvotes: 0

Views: 308

Answers (1)

Gaurav
Gaurav

Reputation: 12796

You can do this with CSS 2.

Is this what you are trying to achieve: http://jsfiddle.net/W5tzs/2/

First move creative into chris:

<p class="chris">CHRIS CARPENTER<p class="creative">Creative Design</p></p>

Then add relative positioning to creative:

.creative {
    text-align: center;
    position: relative;
    top: -110px;
    left: 100px;
    font-size: 40px;
    color: #dce0df;        
}

Adjust top and left to your heart's content. Use a media query if you need creative to shift when chris word wraps. Add a min-width if it bothers you that creative moves when the window is really small.

Upvotes: 1

Related Questions