How to define top margin for widgets - css

Question

I am configuring the widgets for my wordpress site but I would like that these start to be visible after 1200px (for example). It is like to have a margin between the first widget and the top menu of 1200px but I do not find the way to achieve this behaviour.
If you wanna see a real example you can go to this post:
https://www.thetravelerlens.com/tutorial/photoshop/enfocar-photoshop
The widgets must appear right after the black and thin line divider (where the social icons are).
Thanks a lot for all your help in advance.

Answer 1

I'm not sure which widget you are referring to. If you're talking about the "ENFOCAR IMAGEN EN PHOTOSHOP" and "Lo más destacado de este artículo" sections, then the correct way to achieve this would either be to check in your theme documentation if there are other widget areas you can use, or move the widget area where you want it to be displayed via php and a child theme (which I think you're already using) or use CSS, but not just with margins.
Find other widget area
By the look of it, you're using this theme. It's no longer available so I couldn't check a working demo, but by looking at the screenshots on the page, there may be other widget areas you can use. See screenshot below:
See red rectangles in the screenshot
I suggest you read your theme documentation to see if you can use those, but generally speaking, you can:
Go on a single post, and click on Customize in the top admin bar.
Click on Widgets and you should see a list of all the available widget locations on this page. Add the widget in different locations and check if another one fits your needs better. If you can't find anything, then check the solution below.
Move widget area
Locate a file called single.php or single-post.php in your parent theme and duplicate it into your child theme.
In this child theme file, locate the widget area in the code, it should look like this dynamic_sidebar( 'some_identifier' );. Take this code, and move it to the desired location in the page template.
Reload your page and check if it is placed correctly. You'll likely need to remove additional elements on the page to remove the top section and add CSS in the style.css file of your child theme to add some styling to the new widget section
Please note that this is just general instructions and each theme is different so it may differ for yours.
Moving the whole widget area using CSS
You could also move the whole widget area using CSS. If there aren't any better widget locations and you're not too comfortable playing around in php, this may be the best solution.
With flexbox:
This is a more modern approach but has less cross-browser support. You should also add vendor prefixes for better support.
First, we'll apply flexbox to the parent container:
.single-post #tve_editor {
display: flex;
flex-direction: column;
}
Then we'll change the order of the section with the social media icons to place it first, before all the other elements:
.single-post .thrv_symbol_72533 {
order: -1;
top: -49px; //Little fix for the CSS Thrive builder applies
}
With absolute positioning:
This solution has a bit more cross-browser support but will require more CSS tweaking on your end, mostly for responsive behavior with media-queries (which I'm not going to get into details here).
First, we will add a margin at the top of the widget section that is exactly the height of the section with the social media icons:
.single-post #tve_editor > .thrv-page-section.tcb-window-width {
margin-top: 115px !important;
}
Then we'll move the section with the social media icons at the top of the page using absolute positioning:
.single-post .thrv_symbol_72533 {
position: absolute;
top: -114px;
}
Once done, you need to check the responsive behavior and apply CSS tweaks using media queries to adjust the layout for all cases.
Adding margins to current widget:
Again, I'm not sure if you're really referring to the top section with the dark backgound image, but if that is the case, here are the reasons why it's not a good idea to simply add CSS margins to this section:
1200px high is not a fixed distance you can move your widget and that will work on all screens. Your theme is responsive, therefore this height will change depending on the device. For example, it will be much taller on a mobile device.
The height of the widget also depends on its content. If you have more text on another post, it will be taller so you can't just apply a margin of a specific height and hope it to work in all cases.
You would still need to create an empty space below the section with the social media icons that is tall enough to receive the widget section. However, since the height is dynamic, you can't just set a value for its height.