Indent Subheadline

[zenzino]

Hello,

I have a restaurant menu at: http://theshow608.flywheelsites.com/food/

I am using the headline element for each menu item with a subheadline as the description. The headline element is assigned the class of menu-item-title. I would like to indent the subheadline.

This is the css I tried:

.menu-item-title .x-text-content-text-subheadline {
  margin-left: 15px;
  margin-right: 15px;
}

It’s not working. Any ideas?

Thanks,
@zenzino

[Prasant]

Hello @zenzino,

Thanks for asking.

You can add following CSS under Pro > Theme Options > CSS:

.x-text-content-text-subheadline {
    padding-left: 10px;
    padding-right: 15px
}

If you would like to explore CSS, please take a look at following resource.

https://www.youtube.com/watch?v=wcFnnxfA70g
https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[zenzino]

Hahaha! Thanks @Prasant. The css worked.

I’ll try not to be too insulted by the “Absolute Beginner” videos.

I have a pretty good understanding of CSS, I just have a little trouble sometimes figuring out the correct class to use from Chrome dev tools. I’ll watch the tutorial.

I thought I had tried it without the .menu-item-title class, but I guess I didn’t. The reason I added that class was because I only wanted the menu items to be indented and not all subheadlines sitewide.

Thanks,
@zenzino

[ruenel]

Hello There,

To avoid your custom css from being applied site wide, you should be adding the page in Pro Editor’s custom css instead.

Hope this helps.