-
Hi,
I have some trouble with the theme.
1. I cant fix the header on Mobile. Would be great to do this.
2. I have a white “Border” on the right side.
Hi there!
1) Fixed header on mobile is not available at the moment but you can add a similar custom CSS code:
@media (max-width: 991px){ header.header { position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; width: 100% !important; } }2) Thank you for pointing this out. This can happen in some rare cases but there is a simple fix. We will add it automatically in the next update but in the meantime just add this custom CSS code:
.fg-container-no-padding > .fg-row { margin-right: 0 !important; margin-left: 0 !important; }Thanks and cheers!
Hi Tekrulez,
same solution from this topic applies to your website which I have noticed you tried – so you can keep it there. But your website also has a different issue with custom sliders and custom offset. 60px spacing for slider arrows is too much for some reason and causes the vertical gap on mobiles. I am still looking into it (have been for the past 2 hours) and I will let you know tomorrow in your other topic when I find the perfect solution to this.
Thanks and cheers!
Thanks
The code you gave me, doesn’t help
But when I disable this code part. the navbar is fixed on top.
<div class=”styles-section-title styles-selector” style=”min-width: 0px; min-height: 0px; box-sizing: border-box; word-wrap: break-word; cursor: text; color: #222222; font-family: Consolas, ‘Lucida Console’, ‘Courier New’, monospace; font-size: 12px;”>
<div class=”media-list media-matches” style=”min-width: 0px; min-height: 0px; box-sizing: border-box; color: #888888;”>
<div class=”media editable-media” style=”min-width: 0px; min-height: 0px; box-sizing: border-box; overflow: hidden; color: #222222;”><span style=”min-width: 0px; min-height: 0px; box-sizing: border-box;”><span style=”min-width: 0px; min-height: 0px; box-sizing: border-box;”>@media </span><span class=”media-text” style=”min-width: 0px; min-height: 0px; box-sizing: border-box;”>(max-width: 991px)</span></span></div>
</div>
<div style=”min-width: 0px; min-height: 0px; box-sizing: border-box;”><span class=”selector” style=”min-width: 0px; min-height: 0px; box-sizing: border-box; color: #888888;”><span class=”simple-selector selector-matches” style=”min-width: 0px; min-height: 0px; box-sizing: border-box; color: #222222;”>.header-transparent.navbar-fixed-top, </span><span class=”simple-selector” style=”min-width: 0px; min-height: 0px; box-sizing: border-box;”>.header-transparent.navbar-fixed-top-boxed</span></span><span style=”min-width: 0px; min-height: 0px; box-sizing: border-box;”> {</span></div>
</div>
<div class=”style-properties matched-styles monospace” style=”flex: 1 1 0%; padding: 2px 4px 0px 0px; min-width: 0px; min-height: 0px; box-sizing: border-box; font-family: Consolas, ‘Lucida Console’, ‘Courier New’, monospace; font-size: 12px; margin: 0px; list-style: none; clear: both; display: flex; color: #222222; white-space: nowrap;”>
<div class=”tree-outline-disclosure” style=”min-width: 100%; min-height: 0px; box-sizing: border-box; display: inline-block;”>-
<li style=”min-width: 0px; min-height: 14px; box-sizing: border-box; text-overflow: ellipsis; white-space: normal; position: relative; display: block; align-items: center; margin-left: 0px !important; padding-left: 38px; cursor: auto; clear: both;”><input class=”enabled-button” style=”min-width: 0px; min-height: 0px; font-family: inherit; font-size: 10px; background-color: white; visibility: visible; float: left; margin: 0px; vertical-align: top; position: relative; z-index: 1; width: 18px; left: -40px; top: 1px; height: 13px;” type=”checkbox” /> <span class=”webkit-css-property” style=”min-width: 0px; min-height: 0px; box-sizing: border-box; color: #c80000; margin-left: -38px;”>position</span>:<span class=”value” style=”min-width: 0px; min-height: 0px; box-sizing: border-box;”>relative</span>;
</div>
</div>
<div class=”sidebar-pane-closing-brace” style=”min-width: 0px; min-height: 0px; box-sizing: border-box; clear: both; color: #222222; font-family: Consolas, ‘Lucida Console’, ‘Courier New’, monospace; font-size: 12px; white-space: nowrap;”>}</div><div class=”sidebar-pane-closing-brace” style=”min-width: 0px; min-height: 0px; box-sizing: border-box; clear: both; color: #222222; font-family: Consolas, ‘Lucida Console’, ‘Courier New’, monospace; font-size: 12px; white-space: nowrap;”></div>
<div class=”styles-section-title styles-selector” style=”min-width: 0px; min-height: 0px; box-sizing: border-box; word-wrap: break-word; cursor: text; color: #222222; font-family: Consolas, ‘Lucida Console’, ‘Courier New’, monospace; font-size: 12px;”></div>Sorry … I copy to much
@media (max-width: 991px) .header-transparent.navbar-fixed-top, .header-transparent.navbar-fixed-top-boxed { <del>position: relative;</del> }Hi green4gfx!
I have just visited your website and it seems like the header is fixed on mobile now, so is everything okay now please?
Thanks and cheers!
Hi there!
I see, thank you. That border can be fixed with this custom CSS code:
.page-wrapper { overflow:hidden; }All these little fixes will be added in the next updates of course so what you are adding is just temporary.
Thanks and cheers!
Hi there!
I can see it worked for you, please let me know if you would have any more questions, I am always happy to help out whenever I can
Thanks and cheers!
The topic ‘Mobile Problems (header / width)’ is closed to new replies.
