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.

@ccwizard

This is an old screencast, but I believe still relevant to your question: https://docs.cobaltapps.com/article/144-how-to-make-my-dynamik-website-fully-fluid-and-responsive

Eric,

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?

@ccwizard

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.

Thanks.

@ccwizard

Try adding this to your Custom CSS:

.site-inner {
overflow: visible;
}

Thank you Eric, that fixed it for me.

@ccwizard

Glad to hear it! 🙂

Log in to reply