Watch this before using background images!
Автор: DiviCoaching
Загружено: 2022-10-06
Просмотров: 4997
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Get the Divi Theme and Builder - 10% off* - https://divicoaching.com/getdivi
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Build a fully responsive row with image and text block in Divi the right way.
Two column rows crop up on many websites built with the Divi Theme and Builder. Often there is text in one column and image in the other but it is trickier than it seems to make this work responsively and in a way that makes the image both SEO and accessibility friendly.
/**** CSS Snippets Used ****/
/* Set the height of the image module, image-wrapper and image to 100% */
.dc-image-fill,
.dc-image-fill .et_pb_image_wrap,
.et_pb_image_wrap img {
height: 100%;
}
/* Set the object-fit property so image fills the column and is cropped*/
.dc-image-fill img {
object-fit: cover;
}
Responsive Font Calculator
https://websemantics.uk/tools/respons...
Chapters
00:00 Introduction
01:05 Building the page
02:17 Adding a CSS class to the row
03:33 Styling the text module
04:18 Adding responsive (clamp) text
06:30 Right and "wrong" ways to add the image
10:00 Adding a CSS class to the image
10:22 Styling the image with CSS
Доступные форматы для скачивания:
Скачать видео mp4
-
Информация по загрузке:
![Working with Custom CSS in Divi: Beginner Guide [2022]](https://ricktube.ru/thumbnail/k7Vy_MY080I/mqdefault.jpg)