adjust the style in Boxes

  • Resolved academicreg

    (@academicreg)


    6 years, 5 months ago

    Hi Tobias hope your well.

    On the page (link attached) the wording when I go over a certain amount of charaters break on to a new line and also strech the box.

    Can you advise. This is the code I have in the box:
    <a style="display:inline-block;padding:60px 100px;border:0;border-radius:6px; font-size:18px;font-weight:bold;letter-spacing:.0625em;text-transform:uppercase;background:#2c751e;color:#fff;text-decoration:none;" href="https://www.edgehill.ac.uk/registry/enrolment/course-confirmation/">Meet the team </a>

    Thanks for any help.

    warm wishes

    Martin

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    6 years, 5 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    To prevent the wrapping, you could extend the “Custom CSS”

    .tablepress-id-58 tbody td {
	border: none!important;
}

    to

    .tablepress-id-58 tbody td {
	border: none!important;
	white-space: nowrap;
}

    However, you might actually need play more with your button CSS, for heights, etc., e.g.

    .tablepress a.button {
	display: block;
	border: 0;
	border-radius: 6px;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: .0625em;
	text-transform: uppercase;
	background: #2c751e;
	color: #ffffff;
	text-decoration: none;
	text-align: center;
	width: 100%;
	height: 150px;
	line-height: 150px;
}

    and then button/link HTML like

    <a href="https://www.edgehill.ac.uk/registry/enrolment/course-confirmation/" class="button">Meet the team</a>

    And then, to be honest, a table is not a good choice for the layout (buttons in three columns) here. This will inevitably lead to problems on small screen, as you can’t directly change the layout to e.g. only have two columns. I would therefore actually recommend to not use a table and instead also use CSS parameters like float and a fixed button width, which then will the column layout.

    Regards,
    Tobias

    Thread Starter academicreg

    (@academicreg)

    6 years, 5 months ago

    Hi Tobias,

    thank you so much for getting back to me and for your comprehensive answer really appreciated.

    I am going to look and try everything you said and then get back to you, I think I may struggle with the code without a table.

    warm wishes and thanks again for your support.

    Martin

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    6 years, 5 months ago

    Hi,

    no problem! I hope this helps! 🙂

    Best wishes,
    Tobias

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘adjust the style in Boxes’ is closed to new replies.

Tags