dv_louise_designs

@tuanphan That would be so helpful, thank you! The breakpoint seems to be at a higher pixel size than standard mobile, so I wasn't quite sure how to do that or what those breakpoints were. Thank you!

On 7/22/2022 at 9:41 AM, bangank36 said:

2. Adding to Home > Design > Custom Css

.header-nav {
  position: absolute;
  top: 5px;
  bottom: 0;
  margin-top: 0!important;
  margin-left: -50px!important;
}
.header-nav-item:nth-of-type(2) {
  margin-right: 340px!important;
}

.header-title-logo a {
  z-index: 1000;
  position: relative;
}

Let me know how it works on your site

Hey @bangank36! It worked well, except when I shrink my window to a certain size and below it condenses too much with unwanted overlap. I also adjusted your code slightly, let me know what you think!

Updated code:

.header-nav {
  position: absolute;
  top: 10px;
  bottom: 0;
  margin-top: 0px!important;
  margin-left: 60px!important;
}

.header-nav-item:nth-of-type(2) {
  margin-right: 350px!important;
}

Site URL: https://caribou-orchid-afd2.squarespace.com/

Hi,

I am hoping to make my client's website's header look like the layout below: 

How can I code it to reflect that?

**Also, is there a way to make the social links closer together, but not the navigation links? 

Thank you!

Hi @tuanphan, is there a way I can reorder my mobile footer content so the copyright text block can go at the bottom of the footer? 

Hi @tuanphan, 

How can I align the two location info columns in my footer to be side-by-side?  Also to center my social icons?

site: tractioniq.co

pass: demo

Thanks!

On 8/4/2020 at 3:45 PM, clarson1229 said:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
$( document ).ready(function() {
	$( ".header-actions-action.header-actions-action--social" ).append("<div class='ec-cart-widget'></div>");
});
</script>

and then a bit of css to make the bag the same size as the other icons and change the color to be the same. 

.ec-minicart--no-shape{
  padding: 0px !important; 
}
.ec-minicart__icon{
  height: 30px !important;
  width: 30px !important;
}
.ec-minicart__icon .icon-default path[stroke], .ec-minicart__icon .icon-default circle[stroke]{
  stroke: #(color code you want) !important;
}

 

@clarson1229 this was so helpful, thank you!! do you know if there is way to make it so the cart icon is to the left of the CTA button? Also - how to show it in mobile?

I modified the code to be .header-actions-action--CTA but it puts it below the CTA on the left side, whereas I want it to be the same level to the left of the CTA.

Site: https://magnolia-sawfish-bdxx.squarespace.com/

Pass: demo

Also in case you're not an active user anymore, @tuanphan any ideas? 

On 3/3/2022 at 8:31 AM, tuanphan said:

html#ecwid_html body#ecwid_body .ec-minicart {
    position: fixed;
    top: 2vw;
    right: 3vw;
}

hey @tuanphan, I am still having issues with this. It unfortunately didn't work for me 😞

On 3/29/2022 at 5:54 AM, tuanphan said:

Hi. What is your problem?

Hi @tuanphan! I would love to get the header of my site to match that of my wireframe or something close to it. See attached:

@tuanphan so cart icon is a separate issue that I'm still trying to fix - it's through ECWID. See my other post here asking about that (which you also helped me with!): 

@bangank36 I have a similar issue; can you help me with code to move the navigation button and the social links to the sides of the rest of the navigation links? See wireframe mockup:

Site: https://magnolia-sawfish-bdxx.squarespace.com/

Password: demo

Hi @IXStudio! That was very helpful. Was wondering if you could help with another part of that site - everything was good until recently and the list got all jumbled in mobile again. Any help would be great! 

I also can't seem to edit either "The Problem" or "The Solution" text to change size. Thanks!

Hey @tuanphan @bangank36!

Wondering why my mobile view of homepage image card has weird blocky text background when it should like it does in desktop mode??

site: www.adeptbenefits.com

pass: Employee180!

Quote

On 3/10/2022 at 2:27 PM, dv_louise_designs said:

yes - how do I keep the text to a certain number of lines (1 or 2) regardless of window size? especially on mobile. I want to keep the images aligned and text wrapping messes that up. first set of images is from Home Page (I believe I fixed it for mobile view).

 

second set of images is from Meet the Team page. 

 

@tuanphan any ideas?

13 hours ago, tuanphan said:

    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;

Amazing, thank you so much!

On 3/14/2022 at 5:48 AM, tuanphan said:

Try adding to Design > Custom CSS

/* Footer mobile */
@media screen and (max-width:767px) {
div#page-section-61bd0394f151e77577aaffc3>.row>.span-1:nth-child(4) {
    width: 27% !important;
    float: left !important;
}
div#page-section-61bd0394f151e77577aaffc3>.row>.span-1:nth-child(5) {
    width: 73% !important;
    float: left !important;
}

div#block-yui_3_17_2_1_1645244055141_28362>div p:nth-child(2) {display: flex;align-items: center;flex-wrap: nowrap;}
}

 

Hi @tuanphan! That worked, but is there a way to make it so that there is more space between the page names? I can make the font slightly smaller as well. 

15 hours ago, bangank36 said:

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px){
  section[data-section-id="6215672720d4727b3982a809"] .user-items-list-simple .list-item-content  {
    height: auto ;
    width: 100%;
  }
  section[data-section-id="6215672720d4727b3982a809"] {
    padding: 0;
  }
  section[data-section-id="6215672720d4727b3982a809"] .list-item-content__description p {
    text-align: center !important;
  }
}

Let me know how it works on your site

@bangank36It worked really well! Thank you! Can you also help me with changing the font-size of the section title, and reducing space between list items?

12 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Mobile footer */
@media screen and (max-width:767px) {
div#page-section-61bd0394f151e77577aaffc3>.row>.span-1:nth-child(n+3) {
    float: left !important;
    width: 40% !important;
}
div#page-section-61bd0394f151e77577aaffc3>.row>.span-7 {
    clear: left;
}
}

 

@tuanphan Thank you!! I arranged things a bit again, and I realized I would really like to make it so the Pages part in mobile footer is arranged horizontally (all on one line, to the right) to maintain better balance, rather than all vertically stacked like it is in desktop version. Then would like to move the search bar and rest of the mobile footer up (remove space). Code that might help? Also shrinking search bar in mobile?

@tuanphanThat worked perfectly, thank you so so much!

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

Hi! I have been having the hardest time centering the title and description of the simple list block of my Meet the Team page for a client I've been designing a site for. Here's the code I have, I know it's not perfect but it's working for the most part:

//mobile version - meet the team//
@media only screen and (max-width: 767px) { 
section[data-section-id="6215672720d4727b3982a809"] .user-items-list-item-container .list-item-content__title {
  font-weight: normal!important;
  font-size: 16pt !important;
  font-weight:700!important;
  font-size: 1rem;
  margin-right: 195px;
  padding-bottom: 0px;
  padding-top: 30px;
}
  .user-items-list-item-container .list-item-content__description {
  font-size:10pt!important;
  text-align: center!important;
      margin-right: 300px;
}
.user-items-list-simple .list-item-content {
  width: 300%;
  height: 2vh;
}
  .user-items-list-simple img{
    max-width: 900px!important;
    margin: 0 auto!important;
  }
}

Help me center the descriptions, especially???

(Password is Employee180!)

Hi @tuanphan, can you help me with my footer as well? I'd like to bring the Pages section and Social Sections side by side, and make the whole footer take up less space overall. 

Site is www.adeptbenefits.com , Employee180! (pass)

6 hours ago, tuanphan said:

Hi. It looks like you removed List section. Do you still need help?

https://www.adeptbenefits.com/

yes - how do I keep the text to a certain number of lines (1 or 2) regardless of window size? especially on mobile. I want to keep the images aligned and text wrapping messes that up. first set of images is from Home Page (I believe I fixed it for mobile view).

second set of images is from Meet the Team page. 

On 3/6/2022 at 12:08 AM, tuanphan said:

Which page are you referring to?

All of them really, but specifically the one above is the Meet Our Team page. Also, is there a way to keep the aspect ratio constraints from changing for photos?

On 3/3/2022 at 8:31 AM, tuanphan said:

What is access password?

Employee180!

How can I make the text wrapping issue go away from my site? I have it on many pages, but specifically referring to this page right now- when the window changes, the text moves from one line to two and pushes the images out of line with each other. 

On mobile, I have a different issue, because this one person's name (we're getting a new image soon, it's supposed to have that weird shape at the moment so don't worry about that) stays on one line weirdly, but isn't centered. 

Site is www.adeptbenefits.com and password is Employee180!

On 2/27/2022 at 2:40 AM, tuanphan said:

It looks like you removed icon? We don't see ecwid icon on header now

I updated to include in header with code injection- it causes glitching in my Ecwid store though, because store is no longer visible in Order > Menu.