Remove padding between blocks, widen header image, 2 columns responsive

  • I am having some issues with the Go theme for this webpage and would love your help on some fixes.

    (1) Padding between blocks. There is about 100 pixels of white space between each block and the next. This looks too spaced out and makes the website appear to be almost entirely white space with small floating blocks in between when scrolling on laptop. I can’t manually delete out the spacing in the editor. Can you provide me the custom CSS to remove these? I’d like it to be 0px padding or customizable.

    (2) Widen the header logo. The logo at the top is currently confined to a maximum of 300px so looks very tiny compared to the body text. I’d like it to be much wider e.g. a 50% of full width. Is there a CSS to modify the width? This would also help for mobile where the header logo looks almost illegibly tiny at its max width.

    (2a) Widen the site header. As an alternative to a logo, it would be useful to be able to widen the site header when not using a logo. Currently, the site header font size when used is several sizes smaller than the Heading 1 font size, so the site header text looks dwarfed by the text in the body of the page. I’d like the site header to be much bigger so it looks proportionate. How can I do this?

    (3) Responsive 2 column page. Currently I have two blocks with are 2 column, an image on the left and text on the right. When you resize the page smaller, the image looks enormous and takes over the whole column, so effectively you have to scroll past a huge vertical image to get to the text. Is there a way to make the image responsive so it shrinks or turns into a square to make the page easier to scroll when resized? The same sort of thing happens on mobile. The 2 columns with an image in the left column renders with a giant image followed by text, so when scrolling on mobile, your whole screen is taken up by a big portrait image which you need to scroll past. Solution?

    Website: https://tinyurl.com/2p8tse2v

    Thank you!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter jeremy4

    (@jeremy4)

    Please let me know if you can help with my issue

    @jeremy4

    I’m not seeing the spacing you are referring to? Is that something you were able to adjust? I only see a top and bottom margin on the .wp-block-columns.alignwide element.

    To widen the logo you can do the following, but you my want to tweak the px value to your needs:

    .header__titles .custom-logo {
   max-width: 500px;
}

    On mobile, the two column collapses into a single column, and both halfs of the columns take up 100% width of the page. If you want the image to be smaller, you can use CSS to adjust its width and alignment on the page on mobile devices only, but you’ll need to use media queries to achieve it.

    To widen the header you can tweak the padding on the .header__inner element.

    .header__inner {
   padding: 3em 2em;
}

    Or to change it globally you can do:

    :root {
    --go-logo--max-width: 800px;
}
    Thread Starter jeremy4

    (@jeremy4)

    @eherman24

    Hi Evan, thanks for your detailed response.

    Regarding the padding between blocks, the issue remains the same as before. I’m referring to the padding AFTER each block, so on the Home page, it’s first visible after the first block and between the second block. There is a 150 pixel ‘white gap’ between the first and second block. Scrolling down, there’s a 150 pixel ‘white gap’ between the second block and the third block. Same between block 3 and block, block 4 and block 5, when scrolling down the Home page in Google Chrome on MacOS. Therefore the page gives the appearance of being way too stretched out with random blank spots. Are you able to see the padding?

    Additionally, regarding problem 3 and the responsive page, the problem also occurs on Chrome on MacOS, not just mobile. (When you resize the page smaller, the image looks enormous and takes over the whole column, so effectively you have to scroll past a huge vertical image to get to the text. Is there a way to make the image responsive so it shrinks or turns into a square to make the page easier to scroll when resized?) Is there a way to get the lefthand ‘big image’ column to turn into a little image? Or requires a script of some kind? An example of the effect I am seeking is on this page: https://tinyurl.com/yc5e7h4d Looking at the second block, it is two columns with a ‘big image’ on the lefthand image. But when you resize the browser smaller, the lefthand image turns into a small round image.

    Thanks for your help!

    • This reply was modified 2 years, 10 months ago by jeremy4.
    Thread Starter jeremy4

    (@jeremy4)

    @eherman24

    I tried the suggested code and none of it made changes to my layout, it didn’t do anything. I added it to the Additional CSS area in the Customise panel; have I made an error here?

    Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Remove padding between blocks, widen header image, 2 columns responsive’ is closed to new replies.