Change list to inline [instead of stacked items are single rows]

Tagged: , ,

Author Posts

adrian29630 March 1, 2016 at 9:01 pm

Heads up! this post was created when Microthemer was at version 4. The current version is 7. Some references to the interface may be out of date.

I have a list as below that I want to appear in a single line instead of on 3 rows. It is as follows:-

Bed 1
Baths 1
m2 60

And I want it to be :-

Beds 1 Baths 1 M2 60

I also want to change the container size to reflect the inline space needed.

I have tried every way possible to get this to work but I either have the words and numbers together as in Beds1 Baths1 M260 or the container shrinks and they appear as in the top example but in a confined space.

If anyone can help with the correct CSS to obtain the result I need I would be very grateful. The website is holdersothebysrealty-rentals.com

Thanks

Adrian

Sebastian March 3, 2016 at 11:04 am

Hi Adrian,

I wasn’t able to access your website unfortunately: http://holdersothebysrealty-rentals.com/ (is that the right URL?)

I can try to advise you in the absence of that though. Could you try setting the following properties on the list items?

display:inline-block
float:left

And then set padding/margin to suit?

Cheers,
Sebastian

adrian29630 March 3, 2016 at 1:06 pm

HI Sebastian

Sorry, yes there is a typo in the URL it should be http://holdensothebysrealty-rentals.com. I had found that .propinfo ul li { display: inline-block; } will put the list on one line but it then ends up placing everything together like this Bed1Baths1m260 when I need spaces between so it looks like this Bed 1 Baths 1 M2 60. I also really need to change the size of the container these are in as when put in line instead of one above the other the container is too large.

I had managed to do this before but either a theme update or the plugin update somehow removed the alterations so that it reverted to the original layout and now I can’t find how to amend it again.

Thanks

Adrian

Sebastian March 3, 2016 at 5:55 pm

Thanks Adrian, will this do the job of spacing out the list items?

.propinfo ul li { display: inline-block; margin-right:15px; }

adrian29630 March 3, 2016 at 8:12 pm

Hi Sebastian

Unfortunately no! But after some investigation i have sorted it. The required code was as follows:-

.propinfo ul li { display: inline-block;}
.propinfo {text-align: center;}
.propinfo span, .author-info span {margin-right: 15px; border-bottom-width: 0px;}
.propinfo {padding: 10px; font-size: 16px; }

Or at least to get it as I wanted it to appear.

Thanks

Adrian

You must login or register to reply to this topic.