Padding around nested menu? - Page 2...

Feb 6th, 2019 at 04:14 PM
User 2699991 Photo

Reetami's Dad
Registered User
5,558 posts

Marc Nevue wrote:
Here is a CSS code for my 'ul.list-container.large-horizontal.list-container-menu.menu.vertical' :
background-origin: padding-box; Could this be it? If so, where do I go to remove it?


well I am not clear on what the problem is

The logo image has padding

I am not sure what you want it to look like
STUCK ON SOMETHING?
Learning by doing. Responsive Site Designer Tutorials

Feb 6th, 2019 at 04:22 PM
User 219465 Photo

Marc Nevue
Registered User
324 posts

In the browser preview, at the largest break point there is a gap. or padding, all around the top container. There is even a small gap, or padding, between the two containers.
Now when you resize the browser so that the medium break point kicks in that gap, or padding, all around goes away

I would like to remove the gap at the largest break point.
Feb 6th, 2019 at 04:26 PM
User 2699991 Photo

Reetami's Dad
Registered User
5,558 posts

Marc Nevue wrote:
In the browser preview, at the largest break point there is a gap. or padding, all around the top container. There is even a small gap, or padding, between the two containers.
Now when you resize the browser so that the medium break point kicks in that gap, or padding, all around goes away

I would like to remove the gap at the largest break point.


the list container at the highest breakpoint has a 1px border (transparent) remove that,,,,,,,,,,,,, is that it
STUCK ON SOMETHING?
Learning by doing. Responsive Site Designer Tutorials

Feb 6th, 2019 at 04:40 PM
User 219465 Photo

Marc Nevue
Registered User
324 posts

My list container does not show a 1 pixel border. It is set to 0 and it is grayed out.

Under the LAYOUT – GRID AND FELXBOX LAYOUT I see a section that says FLEXBOX and there is a 1 above Flex Shrink. I changed that to 0 but that did not help.
Feb 6th, 2019 at 04:46 PM
User 2699991 Photo

Reetami's Dad
Registered User
5,558 posts

Marc Nevue wrote:
My list container does not show a 1 pixel border. It is set to 0 and it is grayed out.

Under the LAYOUT – GRID AND FELXBOX LAYOUT I see a section that says FLEXBOX and there is a 1 above Flex Shrink. I changed that to 0 but that did not help.

well on the project file you sent there is a 1 px border

if it's greyed out you click in the center to make the borders all around go white, you will now see there is a 1px border set to transparent all around, just set the border to 0px and see what happens
STUCK ON SOMETHING?
Learning by doing. Responsive Site Designer Tutorials

Feb 6th, 2019 at 04:53 PM
User 2699991 Photo

Reetami's Dad
Registered User
5,558 posts

Wayan Jaya wrote:
[quote=Marc Nevue]

Under the LAYOUT – GRID AND FELXBOX LAYOUT I see a section that says FLEXBOX and there is a 1 above Flex Shrink. I changed that to 0 but that did not help.

Your grid thingy doesn't work no matter what you do because you havent applied the "display grid "to the canvas, so all the browsers are just displaying "fallback first"

If you do apply the "Display Grid" then you will see that your menu items are in a column not a row, which means you need to then adjust placements etc etc for Grid display
STUCK ON SOMETHING?
Learning by doing. Responsive Site Designer Tutorials

Feb 6th, 2019 at 05:56 PM
User 2699991 Photo

Reetami's Dad
Registered User
5,558 posts

Also
I'm not sure how the containers are set up for displaying/hiding at the breakpoints, but however, it is set up on Internet Explorer unless your visitors have "allow blocked content" enabled automatically, the top container (which should be hidden at higher points), still shows.

At the highest breakpoint, the container "mobile-menu-navigation" should be set to display = non That way on Internet Explorer it doesn't show.
STUCK ON SOMETHING?
Learning by doing. Responsive Site Designer Tutorials

Feb 6th, 2019 at 06:42 PM
User 122279 Photo

Inger
Senior Advisor
14,736 posts

I found it in the main.css.

Marc, Open the Page manager, scroll down to Head and check 'use global'. There will be a box appearing, in it write this:

<style>
ul.list-container.list-container-menu.menu.vertical {
border: none;
}
</style>

Then click Done, and preview the page. You won't see any changes in the programme itself, but in preview the border should be gone.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Feb 6th, 2019 at 07:01 PM
User 2699991 Photo

Reetami's Dad
Registered User
5,558 posts

Inger wrote:
I found it in the main.css.

Marc, Open the Page manager, scroll down to Head and check 'use global'. There will be a box appearing, in it write this:

<style>
ul.list-container.list-container-menu.menu.vertical {
border: none;
}
</style>

Then click Done, and preview the page. You won't see any changes in the programme itself, but in preview the border should be gone.


or just get rid of the border in the borders settings
STUCK ON SOMETHING?
Learning by doing. Responsive Site Designer Tutorials

Feb 6th, 2019 at 07:02 PM
User 122279 Photo

Inger
Senior Advisor
14,736 posts

Oh, I hadn't refreshed the page, so I hadn't seen your reply ;)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.