Close

Responsive Columns on Topic Page?

JonJJ
10 years ago
#4099 Quote
Avatar
  • 30
Hi support

I've recently bought the NeoFashion Responsive Theme and are currently making Topic pages for it.

My question is if I can use any css classes to apply my content to make it responsive in the same way that you have for the products pages or product details?

Example:
What I would like to have on my topic page is 2 columns (div's) with 50% width.
Text in 1st column and image in the 2nd column.

Now when I resize my browser to fit a mobile device, I would like to have the 1st column to 100% width and the 2nd column to 100%. So the end result will have the text on top and the image below it.

Are there any classes in the theme that are already responsive to help me achieve that result?


Support
10 years ago
#4101 Quote
Avatar
  • Moderator
  • 1044
JonJJ wrote:
Hi support

I've recently bought the NeoFashion Responsive Theme and are currently making Topic pages for it.

My question is if I can use any css classes to apply my content to make it responsive in the same way that you have for the products pages or product details?

Example:
What I would like to have on my topic page is 2 columns (div's) with 50% width.
Text in 1st column and image in the 2nd column.

Now when I resize my browser to fit a mobile device, I would like to have the 1st column to 100% width and the 2nd column to 100%. So the end result will have the text on top and the image below it.

Are there any classes in the theme that are already responsive to help me achieve that result?




Hi JONJJ,

The functionality that you described will not require any specific class to apply, just make the width 100% on a smaller device and when having a display:block, the two elements will be placed one below another.

In the case for a desktop version you will need to have width:50% and either float or display: inline-block on the two divs, so that you will have two columns with width:50%.

Hope that helps!