- This topic has 13 replies, 3 voices, and was last updated 4 years, 8 months ago by Tom.
-
AuthorPosts
-
July 18, 2019 at 10:13 am #961366Oscar
Hi, how can I remove the scroll from the left sidebar?
July 18, 2019 at 11:59 am #961417LeoStaffCustomer SupportHi there,
Are you referring to the header on the left?
I don’t see a scroll?
https://www.screencast.com/t/VQiIl5UyNxLet me know π
July 18, 2019 at 1:06 pm #961453OscarYes, the header on th left…a scroll is displayed in my browser…
Also, how can I do so that the widget text of “CONTACT” on mobile is displayed in the footer of the page
July 18, 2019 at 5:59 pm #961563TomLead DeveloperLead DeveloperHi there,
The scroll bar is necessary if you want users to be able to see the content at the bottom of your sidebar.
However, you can remove it like this:
.site-header { overflow: hidden; }
Let me know π
July 19, 2019 at 5:54 pm #962329OscarHi Tom
I will try to explain better what I need π
I have this site http://dosamigosfincadecafe.com/ with the main menu on the left sidebar and a widget of html text at the bottom which shows some contact details.
I’d like to know how I can make this widget show up at the bottom of the screen when the site is seen on mobile devices.
July 20, 2019 at 8:19 pm #963083TomLead DeveloperLead DeveloperHi there,
Sorry for not getting back to you sooner.
So would these widgets be fixed to the bottom of the screen on mobile? Or would they be in the footer once you scrolled down?
I’m not sure if you’ll have enough screen space to fix them to the bottom of the screen, especially on smaller phones.
Let me know π
July 21, 2019 at 4:35 pm #963706OscarHi, thanks for you response.
Regarding your question: Yes, I need that in big screens the menu and the contact widget remain on the left and in small screens (cell phones) the content of the widget is shown below the image.
July 22, 2019 at 9:52 am #964328TomLead DeveloperLead DeveloperDid you reset your site? I’m not seeing the same layout I was seeing before.
Let me know π
July 22, 2019 at 1:08 pm #964468OscarHi Tom, Sorry for not warning, the site was a while offline, right now is available at dosamigosfincadecafe.com and with the same layout.
July 22, 2019 at 6:08 pm #964607TomLead DeveloperLead DeveloperHi there,
What if you copied the widgets into the Footer Widget area, then added this CSS?:
.footer-widgets { display: none; } @media (max-width: 768px) { .header-widget { display: none; } .footer-widgets { display: block; } }
July 23, 2019 at 10:41 am #965273OscarHi Tom, thnaks for you support, you are the best
Adding the CSS that you give me does not achieve what I need…
If it helps, I share with you the CSS I have in the “additional CSS tab”…
`.site-info{display: none;}
.one-container .inside-right-sidebar, .one-container .inside-left-sidebar{
text-align: center;
}/*Contact Form Styles */
/* GeneratePress Site CSS */ @media (min-width: 1000px)
{body {
padding: 0 0 0;
margin-left: 300px;}.site-header {
position: fixed;
left: 0;
top: 0;
width: 300px;
z-index: 300;
height: 100%;
overflow: auto;
overflow-x: hidden;
-webkit-backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
transition: .1s ease;
}.admin-bar .site-header {
top: 32px;
}.site-header .main-navigation li {
float: none;
}}
.inside-header {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
}.site-branding,
.site-logo {
order: 1;
}.header-widget {
order: 3;
}.nav-float-right .inside-header .main-navigation {
order: 2;
float: none;
margin-top: 30px;
margin-bottom: 50px;
}.nav-float-right .header-widget {
float: none;
top: auto;
max-width: 100%;
}#menu-social-sider li {
display: inline-block;
margin: 0 10px;
}.dropdown-click .site-header .main-navigation ul ul {
position: relative;
}a.button,
a.button:visited,
button,
input[type=”submit”] {
border-width: 1px;
border-style: solid;
border-color: inherit;
}.mc4wp-form-fields input {
margin-bottom: 10px;
width: 100%;
text-align: center;
}.single .entry-header::after,
.page .entry-header::after{
border-bottom: 1px solid #000;
content: “”;
display: block;
margin-bottom: 40px;
padding-bottom: 40px;
width: 2.5%;
}.main-navigation.toggled .main-nav li {
text-align: center !important;
}::-webkit-input-placeholder { text-transform: uppercase;
font-size: 14px;
}::-moz-placeholder {
text-transform: uppercase;
font-size: 14px;
}:-ms-input-placeholder {
text-transform: uppercase;
font-size: 14px;
}:-moz-placeholder {
text-transform: uppercase;
font-size: 14px;
}
@media (max-width: 768px) {
.separate-containers .site-main {
margin-top: 20px;
margin-bottom: 0;
}.post {
margin-bottom: 20px;
}.inside-header {
padding: 30px;
}html:not(.mobile-menu-open) .header-widget {
display: none;
}.nav-float-right .inside-header .main-navigation {
margin-top: 0;
}.nav-float-right .inside-header .main-navigation:not(.toggled) {
margin-bottom: 0;
}
}
.header-widget{
width: 210px;
padding-bottom: 10px;
padding-top: 300px;}
/* GeneratePress Site CSS */ @media (min-width: 1000px) {
body {
padding: 0px 0px 0px;
margin-left: 300px;
}.site-header {
position: fixed;
left: 0;
top: 0;
width: 300px;
z-index: 300;
height: 100%;
overflow: auto;
overflow-x: hidden;
-webkit-backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
transition: .1s ease;
}.admin-bar .site-header {
top: 32px;
}.site-header .main-navigation li {
float: none;
}
}.inside-header {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
}.site-branding,
.site-logo {
order: 1;
}.header-widget {
order: 3;
}.nav-float-right .inside-header .main-navigation {
order: 2;
float: none;
margin-top: 30px;
margin-bottom: 0px;
}.nav-float-right .header-widget {
float: none;
top: auto;
max-width: 100%;
}#menu-social-sider li {
display: inline-block;
margin: 0 10px;
}.dropdown-click .site-header .main-navigation ul ul {
position: relative;
}a.button,
a.button:visited,
button,
input[type=”submit”] {
border-width: 1px;
border-style: solid;
border-color: inherit;
}.mc4wp-form-fields input {
margin-bottom: 10px;
width: 100%;
text-align: center;
}.single .entry-header::after,
.page .entry-header::after{
border-bottom: 1px solid #000;
content: “”;
display: block;
margin-bottom: 40px;
padding-bottom: 40px;
width: 2.5%;
}.main-navigation.toggled .main-nav li {
text-align: center !important;
}::-webkit-input-placeholder { text-transform: uppercase;
font-size: 14px;
}::-moz-placeholder {
text-transform: uppercase;
font-size: 14px;
}:-ms-input-placeholder {
text-transform: uppercase;
font-size: 14px;
}:-moz-placeholder {
text-transform: uppercase;
font-size: 14px;
}
@media (max-width: 768px) {
.separate-containers .site-main {
margin-top: 20px;
margin-bottom: 0;
}.post {
margin-bottom: 20px;
}.inside-header {
padding: 30px;
}html:not(.mobile-menu-open) .header-widget {
display: none;
}.nav-float-right .inside-header .main-navigation {
margin-top: 0;
}.nav-float-right .inside-header .main-navigation:not(.toggled) {
margin-bottom: 0;
}
} /* End GeneratePress Site CSS */.footer-widgets {
display: none;
}
@media (max-width: 768px) {
.header-widget {
display: none;
}.footer-widgets {
display: block;
}
}The theme I chose for this site (if I remember correctly) I took it from the site library… it has the name “sider”.
July 23, 2019 at 4:50 pm #965477TomLead DeveloperLead DeveloperWhat exactly didn’t work about it? Did it do anything at all?
Did you copy the widgets to the Footer Widgets area?
Let me know π
July 24, 2019 at 9:08 am #966137OscarHi Tom, sorry for the confusion!
With the CSS you gave me it works perfectly!
Thank you so much for your help!July 24, 2019 at 5:39 pm #966434TomLead DeveloperLead DeveloperYou’re welcome π
-
AuthorPosts
- You must be logged in to reply to this topic.