Hi guys!

 

I am doing a website in Joomla (+Yootheme template) and I am struggling with responsive design. I am not a total beginner in CSS /HTML but in the 'responsive' department I am very new. Your help will be much appreciated.

 

Basically I have an image + text + button. I want to break the composition in such a manner that the image, text and button get on top of each other after the screen gets smaller. An extra bonus would be the text paragraph to switch from

 

text-align:right
 

 

to

 

text-align:center;
 

 

If could this thing right I could apply it to many other sites I am planning to work on as I use the same design concept for frontpages!

 

Peter

You could set the widths of each element to 100% of their parent container but apply those queries depending on screen size. For example:

 

.img { float:left; width:30%; }
.link { float:left; width:20%; }
.btn { float:left; width:20%; }

@media @media (max-width:500px) {
    .img, .link, .btn { width:100%; }
}

 

That's probably not a great example, but I hope you get the idea.

 

Lyndsey.

I use a custom grid now where I specify the columns purely in the media queries. Could you not 'fill out' the elements to full width once you get down to a query such as min-width 480px, for example? It usually works for me. I like to keep things simple as possible. Like me The issue I see arising though is whether what I suggested is going to add unnecessary markup or not...

Can you post the code? Don't know if this will work but you could put a class on those 3 elements and targeting them in a media query. Set each element to display:block and text-align:center