I am unable to make the elements in proper column

[Parthbhalerao]

Namaste,

I would like to have my section look like this for once. Now I am able to use the following code to get a result that looks like<a href"http://cloud.broadcastt.co/ccaa6088684c"> this on the front page:

#title{
  transform:rotate(270deg);
  color:#434343;
  font-family: 'Poppins', sans-serif;
	font-weight:bolder;
  text-transform:uppercase;
  font-size:1.5em;
  float:left;
}

Note: #title is the id that I’ve given to all the headings that will be shown in the same formatting.

How can I achieve this?

Thanks.

[mldarshana]

Hi There @Parthbhalerao

Thanks for writing in! Upon checking, I see that you have enabled a coming soon page on your site, so I could not see the actual issue.

However, could you please try using the following CSS properties as well and see if you can align your element.
position: absolute;
top: 0;

So your CSS should look like.

#title {
    transform: rotate(270deg);
    color: #434343;
    font-family: 'Poppins',sans-serif;
    font-weight: bolder;
    text-transform: uppercase;
    font-size: 1.5em;
    position: absolute;
    top: 0;
}

If you’re still having issues, provide us with an example page URL, so that we can assist you further.

Thanks!

[Parthbhalerao]

Hey,

Thanks for a quick reply, although, I am still facing the issue! I want somehthing like this. See how the title of the sections are aligned on the right of the actual section, it looks more instead of rows in columns, on adding Custom no of columns in the row, the website still doesn’t look the way I want it to look.

Any ideas on how I can achieve this in pro tool. I like how books is written next to it’s section.

Thanks!

[nabeel]

Hi again,

You should try this code instead for your title:

#title {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(90deg);
    transform-origin: top left;
    letter-spacing: .03em;
}

Here is a good tutorial that you can follow to achieve this https://css-tricks.com/sideways-headers/ or checkout this thread https://stackoverflow.com/questions/46611996/css-rotate-text-vertical-extra-space-on-both-sides

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks!