I am using a fresh D8 install. I have created a custom block with a token which I have added to a header. The block is themes from somewhere to float left. If I, through "inspect" in the browser, add an element to float right. All my spacing works out great. I dont want to change other site feilds. Just this block and/or content to float right

How do I add CSS to get this block content to float right? Specific files would be handy or ? Your advise?

The html I have copied from the inspect looks like this

<div data-quickedit-field-id="block_content/2/body/en/layout_builder-default-0-73e5980c_7e7f_426b_9046_491d9b827238-2-01e8424e1f1f24943ed5c53651a4049d736f7ab2e67f5602d40887962c657805" class="w3-section field field--name-body field--type-text-with-summary field--label-hidden w3-bar-item field__item" style="float: right;"><h3><a href="/node/8" hreflang="en">Pro Safety</a></h3>

Thanks for Im sure a simple fix


The CSS changes are applied through a subtheme, but if you don't have access to that or only need to make small adjustment you can use the CSS Editor module to add your CSS.

The HTML you supplied doesn't seem to have a unique attribute you can use to target it reliably. Is there are wrapper div with an ID attribute around that code?

With classes you will likely style more than one component, this selector targets elements with both these classes:

.field--name-body.field--type-text-with-summary {
 float: right; 

BTW you need to test your code in different browsers and browser window sizes to make sure you're not breaking the layout in some cases.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.