How to override fixed pixel widths and use percentages

I am redesigning a website with Dynamik for a client for SEO purposes. He likes the look of his current website which is the full viewport on the browser. Fortunately there is no sidebars so I just need to determine how I can set the width to 100% rather than a fixed width. I know I can go in and override the css manually, but was hoping there was a solution to do it directly in the Dynamik interface.


This is an old screencast, but I believe still relevant to your question:


Thank you for the reply. I watched the video and it isn't quite what I'm looking for. I'm looking to implement the new align-wide and align-full features so I could have a full width content area that is say 1024px on a 1920px resolution screen, but then have a block with an image that is the full 1920px in width so that it spans the entire page.
I've tried adding this to the functions under Custom.
add_theme_support( 'align-wide' );

But the align-wide and align-full options do now show up when I add an image block.

Any thoughts on how to make that work with Dynamik?


You have to make sure that you select "Affects Admin" in the Dynamik Custom > Custom Functions heading area because the code you are working with affects the back-end of your site.

Hello Eric,

Just made that change and now I see the options in the page editor. However, when I view the page, the image is still constrained to the width of the content area instead of going full width. I have the following CSS which makes the image the width of the browser window on other themes but can't get it to work.

.entry-content .wp-block-image.alignwide {
/* Set these margins to work with your own theme. */
margin-left: -80px;
margin-right: -80px;
max-width: 100vw;

.entry-content .wp-block-image.alignfull {
margin-left: calc(-100vw / 2 + 100% / 2);
margin-right: calc(-100vw / 2 + 100% / 2);
max-width: 100vw;

.entry-content .wp-block-image.alignfull img {
width: 100vw;

For some reason the code that is output for the images is the following:

<img src="https://.../wp-content/uploads/2019/05/1a_ylc_banneron_home_page-1024x208.jpg" alt="" class="wp-image-238" srcset="https://.../wp-content/uploads/2019/05/1a_ylc_banneron_home_page-1024x208.jpg 1024w, https://.../wp-content/uploads/2019/05/1a_ylc_banneron_home_page-300x61.jpg 300w, https://.../wp-content/uploads/2019/05/1a_ylc_banneron_home_page-768x156.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px">

Please note how the largest image width is 1024 instead of the 1920 of the original file so that it can span the full screen.



Try adding this to your Custom CSS:

.site-inner {
overflow: visible;

Thank you Eric, that fixed it for me.


Glad to hear it! 🙂

Log in to reply