Headspin Logo
1.2.3
Wireframes
Hero 4

Hero 4

Free content
Published
March 13, 2024
Category

Mesmerizing world of stunning UX/UI designs.

Discover a mesmerizing world of UX/UI designs with this wireframe UI kit, perfect for all your prototyping needs.

*by submitting you agree to GDPR

Time Magazine Logo 1
Time Magazine Logo 1
Add to collection

Overview

This section is designed to incorporate an image that spans 40% of the screen's width, extending beyond the container's boundaries. This effect is achieved through the application of custom CSS, utilizing a grid layout.

Instructions:

  1. Encapsulate all content within a DIV element.
  2. Insert an Image element.
  3. To establish a gap between the content and the image element within the main section, navigate to: Section -> Advanced -> Custom CSS. It is advisable to utilize the clamp unit for spacing. This approach eliminates the need to define different spacing values for smaller screens.

Tips:

  • To alter the positioning of the content relative to the image, simply interchange their placements. This modification will be automatically accommodated.

You might also like

Find more about Headspin UI

Headspin Logo
1.2.3

Products

Copilot Wireframes Sites Components

Resources

Documentation Guides Inspiration Tutorials Blog Support Pricing Changelog Roadmap Testimonials

Community

Facebook X Discord

Legal

Privacy Policy Cookie Policy Terms and Conditions License
Built with
Breakdance
and
Headspinui
@ 2024 HeadspinUI. All rights reserved.
'; //document.body.appendChild(iframe); var html = document.querySelector("html").outerHTML; var body = target.outerHTML; target.replaceWith(iframe); iframe.contentWindow.document.open(); iframe.contentWindow.document.write(html); iframe.contentWindow.document.close(); //document.querySelector("iframe").contentWindow.document.querySelector("body").innerHTML = body; iframe.onload = (event) => { iframeCleaner(); }; var doc = iframe.contentDocument || iframe.contentWindow; var _timer = setInterval(function() { console.log("timer-load"); if (doc.readyState == 'complete') { clearInterval(_timer); iframeCleaner(); } }, 100); } function iframeCleaner(){ var doc = document.querySelector("iframe").contentWindow.document; var sections = doc.querySelectorAll("body > *"); sections.forEach(section=>{ if(section.tagName != "MAIN") section.remove(); }); if(doc.querySelector(".mbfp-btn")) doc.querySelector(".mbfp-btn").remove(); } /**/ const targetNode = document.querySelector("html"); // Options for the observer (which mutations to observe) const config = { attributes: true, childList: false, subtree: false }; // Callback function to execute when mutations are observed const callback = (mutationList, observer) => { for (const mutation of mutationList) { if (mutation.type === "childList") { console.log("A child node has been added or removed."); } else if (mutation.type === "attributes") { var att = targetNode.getAttribute("data-hsx"); var iframe = document.querySelector("iframe"); if(iframe) { iframe.contentWindow.document.querySelector("html").setAttribute("data-hsx",att) } } } }; // Create an observer instance linked to the callback function const observer = new MutationObserver(callback); // Start observing the target node for configured mutations observer.observe(targetNode, config); })