Line spacing for mobile menu + Full-width videos/GIFs for mobile

Site URL: https://www.madebydot.tv/

@tuanphan My website is https://www.madebydot.tv/

• If you have a look at the screenshot, the line spacing of the navigation menu is just so weird at the moment. I'd just like the line spacing between each page on mobile to be the same. Could you please help out?
• The other thing I was wondering was if I can make the project thumbnails and vimeo videos go full width only for mobile for my website? 

Hi,

Q1. The links in Main Navigation - Secondary Navigation so the spacing will be different. You can add this to Design > Custom CSS to make them equal

/* Mobile menu spacing */
a.nav-item-page {
    line-height: 1.5em;
}
.mobile-secondary-nav-wrapper {
    padding-top: 0px !important;
}

Q2. Possible. However it will require a lot of code. Furthermore, if you move or delete a block above/below the video, the code will need to be updated again

@tuanphan The mobile navigation is fixed! Thank youu!

About making the videos full width - Is there a link or a resource you could share for me to learn the code?

Or I might just have to make a mobile friendly version of my website separately which would take a lot of time anyway! :(

On 7/12/2021 at 12:51 AM, blahblahraag said:

@tuanphan The mobile navigation is fixed! Thank youu!

About making the videos full width - Is there a link or a resource you could share for me to learn the code?

Or I might just have to make a mobile friendly version of my website separately which would take a lot of time anyway! :(

W3schools.com or Teamtreehouse.com

Do you need help to fix these?

Site URL – https://www.madebydot.tv/

1. (Mobile – About) On desktop, can see some information about members. On mobile, do not see this information.

https://www.madebydot.tv/about

2. (Tablet -Footer) Text © Dot Design & Motion 2021 is cut into 2 lines.

https://www.madebydot.tv/

3. (Tablet – Menu) Increase text size?

https://www.madebydot.tv/

4. (Tablet – About) Image is skewed upwards.

https://www.madebydot.tv/about

5. (Tablet – Services) The horizontal lines are not aligned with each other, do not look good.

https://www.madebydot.tv/services

Hi, similar problem here. I was wondering if there's any way to move up these texts from the menu bar. I think there's too much white space in here so far. 

On 7/21/2021 at 6:49 AM, shandyyym said:

Hi, similar problem here. I was wondering if there's any way to move up these texts from the menu bar. I think there's too much white space in here so far. 

Hi. WHat is your site url? We can check easier

@tuanphan - Thank you so much for pointing those out! I just saw your comment - Yes I need help with points 2-5 from your list. Please let me know if you can share the solution here.

About point #1 - I have intentionally hidden the text for the about page for mobile because it gets too long to scroll for a user then

I also have two more queries -

A. There's this weird gap between the logo (the black dot) and the first piece of text on every page (In this case 'Creative Process') - How do I decrease that? 

B. I'm turned on 'Mobile bar position: Top Fixed' in my settings but the height is too much at the moment (Second sreenshot here) - How do I decrease the padding around the logo for mobile? (This might be the reason for the awkward gap I'm talking about in point A. 

On 7/22/2021 at 9:41 AM, tuanphan said:

Hi. WHat is your site url? We can check easier

Hi @tuanphan

My website is dwlcflorida.com

On 9/11/2021 at 7:32 AM, shandyyym said:

Hi @tuanphan

My website is dwlcflorida.com

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.header-menu-nav-folder-content {
    justify-content: flex-start;
}
.header-menu-cta {
    position: relative;
    top: -60vw;
}
}

@tuanphan - Could you please have a look at my queries in this thread? Would really appreciate it if you could offer some help!

20 hours ago, blahblahraag said:

@tuanphan - Could you please have a look at my queries in this thread? Would really appreciate it if you could offer some help!

Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:640px) {
/* space between logo-first text */
div#site {
    padding-top: 50px !important;
}
/* space around logo */
.mobile-bar-wrapper>* {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
}
/* tablet */
@media screen and (max-width:900px) and (min-width:641px) {
/* footer text 2 lines */
div#block-yui_3_17_2_1_1608445572396_131677+.row>.col {
    width: 50%;
}
/* menu size */
a.nav-item-page {
    font-size: 50px;
}
}