Mobile View Help

Site URL: https://www.nscadv.com

Hi - 

My website computer view is looking a lot different than the mobile view. My main issue is that the 3 content links that I made right under the title "Consulting" is not centered. On the computer view, these 3 content links/blocks (events, services, about) are horizontally orientated right under the title. 

My question is how do I change the mobile look to show the "event" "services" and "about" to be centrally aligned below "Consulting" on the home-page mobile view? Would that be solved by adding in a customer CSS/coding injection or does that pertain to a plain format issue?

I would really appreciate any help - thank you!!

PW: newyork

Custom CSS to make them centered on mobiles less than 768px wide:

@media screen and (max-width: 768px) {
  #block-yui_3_17_2_1_1594854426435_32468,
  #block-yui_3_17_2_1_1594854426435_3738,
  #block-yui_3_17_2_1_1594854426435_12171 {
    text-align: center !important;
  }
}

There's also something going on with the words up until 1027px, where the word e.g. services is collapsing into itself. This CSS will solve this issue, but the columns are not equally wide so the words are no longer evenly spaced:

@media screen and (min-width: 768px) and (max-width: 1027px) {
	#block-yui_3_17_2_1_1594854426435_32468,
  	#block-yui_3_17_2_1_1594854426435_3738,
  	#block-yui_3_17_2_1_1594854426435_12171 {
    	word-wrap: initial;
  	}
}

Thank you so so much!!! The first code worked perfectly! How do I make the content blocks to be equally wide from each other? I keep trying, but since the spacing is specific, I can't make them equal width. Do you know how to fix this?

I can make them equal using the following CSS:

.collectionlink-title a {
    word-wrap: normal;
}

section[data-section-id="5f0f71e9f846663f42c0d502"] .content-wrapper .content .sqs-layout .row .span-12 .row .span-3 {
    display: none;
}

section[data-section-id="5f0f71e9f846663f42c0d502"] .content-wrapper .content .sqs-layout .row .span-12 .row .span-2,
section[data-section-id="5f0f71e9f846663f42c0d502"] .content-wrapper .content .sqs-layout .row .span-12 .row .span-5 {
    width: 33%;
    text-align: center;
}

section[data-section-id="5f0f71e9f846663f42c0d502"] .content-wrapper .content .sqs-layout .row .span-12 .row .span-5 {
    display: contents
}

However this is going to make them much more spaced out that they are currently.

The "about" space on your template is different to the other 2 spaces.

You have an overflow issue on your home page.

#page {
    width: 100% !important;
    min-height: 700px !important;
    padding: 20px !important;
    margin: 0px !important;
    max-width: 100% !important;
}

Width of 100% and padding of 20px is a total of 40px wider than the screen.

Lower the padding to 0, or if you need the padding, you can calc the width 100% - 40px.

Because 40px of the screen is hanging off to the right, things don't look centered.

To have them share the same width use this CSS:

#page-section-5f0f71e9f846663f42c0d502 div.row:nth-of-type(2) > .col:first-of-type {
    width: 0 !important;
}

#page-section-5f0f71e9f846663f42c0d502 div.row:nth-of-type(2) > .col {
    width: 33%;
    text-align: center;
    word-wrap: normal;
}

#page-section-5f0f71e9f846663f42c0d502 div.row:nth-last-child(1) .col:first-of-type {
    width: 100%;
}