Archived topic

Blocks inside sections

17 replies · Started by rafel jesus on December 28, 2019

Viewing posts 1–15 of 18

December 28, 2019 at 3:21 am #1115811

Hi there.
I would like puy inside a section three blocks, now I have three blocks but in vertical but it is not correct I would like in horizontal, I put code in Html in the section and CSS in style, there are these.

<html>
<head>
	<title>Posicionamento de cajas - Francesc Ricart</title>
	<meta charset="utf8">
	<style>
	</style>
</head>
<body>

<div class="container">
<a href="" class="caixa-1">1</a>
<a href="" class="caixa-2">2</a>
<a href="" class="caixa-3">3</a>
</div>

</body>
</html>

and CSS

.container{
		max-width:800px;
	}

	a[class|="caixa-1"]{
		position:static;
		display:inline-block;
		text-decoration:none;
		width:425px;
		height:425px;
		margin:1px;
		padding:0px;
		border:0px solid #666;
		background-color:#f9f5e3;
		color:#ffffff;
	}

	a[class|="caixa-2"]{
		position:static;
		display:inline-block;
		text-decoration:none;
		width:425px;
		height:425px;
		margin:1px;
		padding:0px;
		border:0px solid #666;
		background-color: #27ae60;
		color:#ffffff;
	}

	a[class|="caixa-3"]
{
		position:static;
		display:inline-block;
		text-decoration:none;
		width:425px;
		height:425px;
		margin:1px;
		padding:0px;
		border:0px solid #666;
		background-color: #ba4a00;
		color:#ffffff;
	}

And I have that

Can you help me? Where is the mistake?
Thanks

December 28, 2019 at 8:57 am #1116189

Hi there,

I would use a different selector other than container - maybe block-container?

Then you could do this:

.block-container {
    display: flex;
}

.block-container a {
    width: 33%;
}

December 28, 2019 at 11:05 am #1116260

Hi @Tom.
Perfect more o less, but if I want to put picture and text inside of every block, how can I do?

December 28, 2019 at 2:30 pm #1116349

You'd need to use HTML img tag:
https://www.w3schools.com/tags/tag_img.asp

December 29, 2019 at 8:03 am #1116827

HI Leo.
I put html code in sections and css in style.css, but it's doesn't work

<html>
<body>
<a href="" class="caixa-1">1</a><img src="formacio.jpg" alt="Formació" height="425" width="425">
<a href="" class="caixa-2"></a>
<a href="" class="caixa-3"></a>
</div>
</body>
</html>

December 29, 2019 at 11:02 am #1116918

Your image src needs to be the full link to the file.

Doesn't look like you are very comfortable with HTML so it might be easier to consider using a block plugin like GhostKit or Kadence block to replace Sections + HTML?

Another good option is to use a page builder like beaver builder or elementor.

It will make your life much easier :)

Or you will need to go through a course like this one:
https://www.codecademy.com/catalog/language/html-css

We can only help with theme related questions and not general HTML tutorials.

December 29, 2019 at 11:55 pm #1117185

Hi Leo.

Your image src needs to be the full link to the file.

I put the full link and it doesn't work

Doesn’t look like you are very comfortable with HTML so it might be easier to consider using a block plugin like GhostKit or Kadence block to replace Sections + HTML?

Another good option is to use a page builder like beaver builder or elementor.

It will make your life much easier

Maybe my life is easier but I want to learn to make without a page builder the site is faster with less plugins.
I tried to work with GhostKit or Kadence but I didn't find a block with this structure.

Section/block put inside three or more blocks and inside every block put background image, text with a link, etc
In fact, all pages were made with block, but the main was made with sections.
Perhaps in the future, the sections will work with Gutenberg's block

Thanks and stay in touch

December 30, 2019 at 9:36 am #1117655

Have you tried using the Columns block along with the Cover block? They're both core Gutenberg blocks and should do what you're looking for.

December 30, 2019 at 10:07 am #1117688

Hi Tom, yes I tried on some page I worked with columns, but it didn't work in section I made the main page with sections.
Thanks.

December 30, 2019 at 4:32 pm #1117942

When you say Sections, do you mean the GP Premium module? If so, that would require some HTML/CSS knowledge to set up - I think it would be much easier to go the Gutenberg route. You can use the "Group" block to set up your sections.

January 1, 2020 at 11:55 pm #1119528

Hi there
in the last section of my website at the end there is a possibility that the green box is centered, as you can see when uploading the whole section is hidden, is it possible?

Thanks

January 2, 2020 at 10:00 am #1120113

I'm not sure I understand - are we talking about the Google Ads section? If so, it looks centered to me.

January 2, 2020 at 10:56 am #1120179

Yes Google Ads section, centered the greenbox.

January 2, 2020 at 5:33 pm #1120447

Here's what I'm seeing right now: https://www.screencast.com/t/pcwVdUtVF

Are you wanting to make it less wide, maybe?

Let me know :)

January 2, 2020 at 9:49 pm #1120531

Hi Tom
No, you can see in the last section Google Ads when the scroll finish the green box disappear, there is any way what the green box move while the section move until the final and stay centered.
same like that
https://www.screencast.com/t/7lbjQUxsXyq
https://www.screencast.com/t/qZmHDeKya

Thanks

This archived topic is closed to new replies.

Start building better websites today.