Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


Question

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? 

01.png

02.png

Link to comment
  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

11 answers to this question

Recommended Posts

  • 0

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

@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! :(

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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

madebydot.tv-01-min.png

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

https://www.madebydot.tv/

madebydot.tv-02-min.png

3. (Tablet – Menu) Increase text size?

https://www.madebydot.tv/

madebydot.tv-03-min.png

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

https://www.madebydot.tv/about

madebydot.tv-04-min.png

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

https://www.madebydot.tv/services

madebydot.tv-05-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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. image.png.aba09ca0e3ec3743b595624029fb7ccd.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
Posted (edited)

@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. 


Screenshot_20210821-181332_Brave.thumb.jpg.4b557afb539f116a525183c60105b23d.jpgScreenshot_20210821-181340_Brave.thumb.jpg.583e0335c3dca78583c14bc63d79b5b6.jpg

 

 

Edited by blahblahraag
Wanted to add a few more queries
Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...