- This topic has 17 replies, 4 voices, and was last updated 4 years, 3 months ago by David.
-
AuthorPosts
-
December 28, 2019 at 3:21 am #1115811rafel jesus
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?
ThanksDecember 28, 2019 at 8:57 am #1116189TomLead DeveloperLead DeveloperHi there,
I would use a different selector other than
container
– maybeblock-container
?Then you could do this:
.block-container { display: flex; } .block-container a { width: 33%; }
December 28, 2019 at 11:05 am #1116260rafel jesusHi @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 #1116349LeoStaffCustomer SupportYou’d need to use HTML img tag:
https://www.w3schools.com/tags/tag_img.aspDecember 29, 2019 at 8:03 am #1116827rafel jesusHI 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 #1116918LeoStaffCustomer SupportYour 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-cssWe can only help with theme related questions and not general HTML tutorials.
December 29, 2019 at 11:55 pm #1117185rafel jesusHi 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 blockThanks and stay in touch
December 30, 2019 at 9:36 am #1117655TomLead DeveloperLead DeveloperHave 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 #1117688rafel jesusHi 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 #1117942TomLead DeveloperLead DeveloperWhen 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 #1119528rafel jesusHi 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 #1120113TomLead DeveloperLead DeveloperI’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 #1120179rafel jesusYes Google Ads section, centered the greenbox.
January 2, 2020 at 5:33 pm #1120447TomLead DeveloperLead DeveloperHere’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 #1120531rafel jesusHi 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/qZmHDeKyaThanks
-
AuthorPosts
- You must be logged in to reply to this topic.