captainkirk

Hi All, After a lot of tinkering, i've been able to line up my header, page margins and all else when in widescreen mode across my website. However, I'm running into difficulties with consistency when cropping a webpage in a smaller window (Eg on Tablet and smaller desktop windows). Two issues I'd like to solve: 1. I want to make sure my header always has a margin between the edge of the browser (this does not occur in tablet mode or when a desktop window is very small before it switches to mobile mode viewer mode) [See Image 1] 2. My Gallery Block, although the max width does not exceed my page margins at all, it tends to shrink beyond the width of the other blocks on my site when decreasing browser window width [See Image 2] Would love some suggestions if possible. Cheers! Website: www.designedbykirk.com

Hi All, After a lot of tinkering, i've been able to line up my header, page margins and all else when in widescreen mode across my website. However, I'm running into difficulties with consistency when cropping a webpage in a smaller window (Eg on Tablet and smaller desktop windows). Two issues I'd like to solve: 1. I want to make sure my header always has a margin between the edge of the browser (this does not occur in tablet mode or when a desktop window is very small before it switches to mobile mode viewer mode) [See Image 1] 2. My Gallery Block, although the max width does not exceed my page margins at all, it tends to shrink beyond the width of the other blocks on my site when decreasing browser window width [See Image 2] Would love some suggestions if possible. Cheers! Website: www.designedbykirk.com

Perfect, it worked, thank-you!

Hello there. Looking to figure out how to increase the vertical padding or distance between the title or header of a blog post article, and the header. Shown in picture. Link for example: https://designedbykirk.com/blog/2023-desk-setup Thanks!

Yes, all figured out, thanks for your assistance /* Gallery Section Top and Bottom Padding */ .gallery-grid[data-width="inset"] { padding-top: 3vw; padding-bottom: 1.5vw; } /* Gallery Section Left and Rid Padding Mobile Effect */ .gallery-grid[data-width="inset"] { padding-right: 6vw; padding-left: 6vw; }

Worked nicely! Thankyou! Would you also know how to do it for other sections including the simple gallery for instance on mobile? www.designedbykirk.com/portfolio Cheers!

www.designedbykirk.com

Hello, I'm trying to make my header on my site, in line with the rest of the content on my pages. I have set max margins to 1200px, which seemed to work on desktop mode, but as soon as you crop the browser window to a certain point the header content (site logo and menu links) seem to extend past the content on the page, displaying edge to edge on mobile. Code I have already added in custom css include: #header { max-width: 1200px; margin: auto; } Ideally, I would like this to work throughout the whole site, where content does not stretch out and remains at the widest point here. Where the blank white borders close in on the content when resizing a window (negative space beyond red lines indicated). Thanks