@media. Или же действительно каждой букве задайте span и соответсвенно border-radius (для каждой буквы). Задайте общий бэкграунд. И если строка сломается, то конец и начало, сломанного места будут с радиусом, Уж буква никак не сломается пополам. Только задавайте общий бэкграунд с учётом радиуса. Чтоб общий не перекрывал радиус. Или попробуйте через js. При помощи медиа запросов. <style>.tobuy-shance__title_accent {
height: 40px;
background-color: yellow;
width: 500px;
display: block;
border: 1px solid #000;
}</style>
<span class="tobuy-shance__title_accent"></span>
<script>
function titleAccent(x) {
var title = document.querySelector('.tobuy-shance__title_accent');
if (x.matches) {
// если размер экрана больше 1000px
title.style.cssText = 'border-radius: 60px;';}
else {
// если размер экрана меньше 1000px
// здесь я умышленно указал radius 0 чтоб вы убелись что оно работает
// если вместо border-radius: 0px; написать border-radius: 60px; то при лбюом размере экрана будет border-radius: 60px
title.style.cssText = 'border-radius: 0px;';}}
var x = window.matchMedia("(min-width: 1000px)")
titleAccent(x);
x.addListener(titleAccent);</script>return ob_get_clean(); что такое ob_get_clean?
function new_pages() {$args = array(
'post_type' => 'page',
'orderby' => 'post_date', // сортировка по дате
'numberposts' => 5, // кол-во выводимых страниц
'post_status' => 'publish', // статус выводимых
);
$result = wp_get_recent_posts( $args ); ?>
<ul>
<?php foreach( $result as $p ){ ?>
<li><a href="<?php echo get_permalink($p['ID']) ?>"><?php echo get_the_post_thumbnail($p['ID']).
// фото
$p['post_title']
// название
.' '.$p['post_excerpt']
// отрывок из текста, если отрывок не ыводится тоиспльзуйте $p['post_content'], но тут надо обрезать текст.
.' '.date( 'Y-m-d', strtotime( $p['post_date'] ) ).
// дата
' '.$p['post_modified'].
// или если надо выод даты в формате используемой в wordpress
__('Comments').' ('.$p['comment_count'].')'
// к-во комментов; ?></a></li><?php } ?></ul><?php }// создаём шорткод
add_shortcode('newpages', 'new_pages');<style>.wrapper {
min-height: 100%;
display: block;
height:100vh;
}</style><body> написать <style>
.bg {
width: 100%;
height: 100%;
left: 0;
position: fixed;
display: block;
}
#bg img {
width: 100%;
height: 100%;
display: block;
}</style>
<body>
<div id="bg" class="bg"><a href="javascript:void(0)" onclick="location.href='https://site.com'"><img src="snow.gif" alt=""></a></div><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/header__main-page.css">
<link rel="stylesheet" href="body.css">
<title>Lorna Shore</title>
<style>
body {
margin: 0;
width: 100%;
}
header {
display: block;
width: 90%;
text-align: center;
margin: 0 auto;
padding: 10px 20px;
}
nav {
display: inline-block;
position: relative;
width: 80%;
text-align: center;
vertical-align: top;
margin: 0 auto;
}
.logo__header {
width: 7%;
text-align: left;
display: inline-block;
}
.logo__header a {
width: 80%;
display: block;
}
ul {
padding: 0;
margin: 0;
vertical-align: top;
display: inline-block;
list-style-type: none;
}
.nav-center {
width: 30%;
margin: 0 20px;
display: inline-block;
}
.account-button__header {
width: 5%;
text-align: right;
display: inline-block;
}
.account-button__header a {
width: 70%;
display: block;
}
img {
width: 100%;
display: block;
}
.left-nav__header {
width: 25%;
}
.right-nav__header {
width: 30%;
}
.left-nav__header li {
display: inline-block;
list-style-type: none;
width: 40%;
vertical-align: top;
margin-left: 10px;
}
.right-nav__header li {
display: inline-block;
list-style-type: none;
width: 28%;
vertical-align: top;
margin-left: 10px;
}</style>
</head>
<body>
<header>
<div class="logo__header"><a href="#"><img src="https://i.ibb.co.com/KFYwpxb/logo-Lorna-Shore.png" alt="logo"></a></div>
<nav class="nav">
<ul class="left-nav__header">
<li><a href="#"><img src="https://i.ibb.co.com/qNnh7Sy/SHOP.png" alt="shop"></a></li>
<li><a href="#"><img src="https://i.ibb.co.com/W0zrw15/Concert-tours.png" alt="concert tours"></a></li></ul>
<a class="nav-center" href="#"><img src="https://i.ibb.co.com/5TzzSMB/News.png" alt="news"></a>
<ul class="right-nav__header">
<li><a href="#"><img src="https://i.ibb.co.com/5TzzSMB/News.png" alt="news"></a></li>
<li><a href="#"><img src="https://i.ibb.co.com/5W5Q8L4/About.png" alt="about"></a></li>
<li><a href="#"><img class="contact-nav__header" src="https://i.ibb.co.com/Bt6jFP6/Contact.png" alt="contact"></a></li></ul></nav>
<div class="account-button__header"><a href="#"><img src="https://i.ibb.co.com/tKTFL2M/account-icon.png" alt="account"></a></div></header>
</body>
</html><style>.heading {
font-size: 28px;
font-weight: bold;
margin-left: calc(7% - 10px);
display: inline-block;
width: auto;
}
.about {
width: 100%;
margin: 0;
display: block;
text-align: center;
}
.number {
display: inline-block;
vertical-align: top;
font-size: 14px;
margin: 5px;
font-weight: bold;
}
.subheading {
display: block;
vertical-align: top;
width: 100%;
}
.column-title {
display: inline-block;
vertical-align: top;
font-weight: bold;
margin: 5px;
line-height: 1;
font-size: 28px;
}
.description {
font-size: 16px;
line-height: 1.5;
margin-bottom: 10px;
}
.column {
padding: 5px;
width: 28%;
margin: 10px;
text-align: left;
border-radius: 5px;
display: inline-block;
}</style>
<div class="heading">/заголовок</div>
<div class="about">
<div class="column">
<div class="subheading">
<span class="number">01</span>
<span class="column-title">Первое описание</span></div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt.
</div></div>
<div class="column">
<div class="subheading">
<span class="number">02</span>
<span class="column-title">Второе описание</span></div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt.
</div></div>
<div class="column">
<div class="subheading">
<span class="number">03</span>
<span class="column-title">Третье описание</span></div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt.
</div></div>
<div class="column">
<div class="subheading">
<span class="number">04</span>
<span class="column-title">Четвертое описание</span></div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt.
</div></div>
<div class="column">
<div class="subheading">
<span class="number">05</span>
<span class="column-title">Пятое описание</span></div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt.
</div></div>
<div class="column">
<div class="subheading">
<span class="number">06</span>
<span class="column-title">Шестое описание</span></div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt.
</div></div></div>element.classList.add("redBackgroundColor1");
element.classList.remove("redBackgroundColor2");.photo {
width: 370px !important;
}