- This topic has 17 replies, 4 voices, and was last updated 2 years, 8 months ago by
.
-
Posts
-
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?
ThanksBest wishes.
From Balaguer, near of BarcelonaLead Developer
Hi 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%; }Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentHi @Tom.
Perfect more o less, but if I want to put picture and text inside of every block, how can I do?Best wishes.
From Balaguer, near of BarcelonaCustomer Support
You’d need to use HTML img tag:
https://www.w3schools.com/tags/tag_img.aspDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/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>Best wishes.
From Balaguer, near of BarcelonaYour 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/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 blockThanks and stay in touch
Best wishes.
From Balaguer, near of BarcelonaHave 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentHi 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.Best wishes.
From Balaguer, near of BarcelonaWhen 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentHi 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
Best wishes.
From Balaguer, near of BarcelonaI’m not sure I understand – are we talking about the Google Ads section? If so, it looks centered to me.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentYes Google Ads section, centered the greenbox.
Best wishes.
From Balaguer, near of BarcelonaHere’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 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentHi 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
Best wishes.
From Balaguer, near of Barcelona
- You must be logged in to reply to this topic.