I would like to disable sticky navigation bar on mobile(below 23cm).
My navigation bar is sticky already on all devices. Even in mobile devices(like iphone,ipad). It looks bad so I want to disable sticky nav bar only on mobile. Help me please:)
You can check my site. My site is here. Thank you.
If this isn't an option on your theme, you can add this CSS within a media query:
#media (max-width: 600px) {
#masthead .top-strip { position:relative; }
}
You might need to add the "!important" after the "relative" if that doesn't work. And, of course, simply change the max-width to the max size of the screen where you DON'T want the nav bar to float.
Then you'll get some extra space in between the logo and the navigation bar (since we just put the navigation bar back into the flow of the page). To fix that, you'll need to find this in your CSS and put it within an #media query only for screens that are larger than the mobile:
#media (min-width: 601px) {
#masthead #branding { margin: 90px auto 10px !important; }
}
If you want to test out sizes, I use http://www.responsinator.com/.
Related
Working on this site: https://redheadedroux.com/
Using Sprinkle Pro Theme
The logo image is automatically designed to size down to 150px in height. I added this code to make it larger:
.header-image .site-title > a {
height: 300px;
}
It looks perfect on the desktop view but now when I view the site on a mobile view, I'm left with large padding space between the announcement/hamburger menu and the first widget. I don't want there to be all of that empty space between the logo and everything else.
I've tried adjusting things in the #media areas already within the theme itself, but nothing seems to work. I feel like it's a matter of selecting this height for a different #media area? But I can't seem to get it to work. Any insight?
Thank you
Photo of what it looks like on mobile view:
Checking your site I can't see any problem at all. Everthing works as You have decided.
If you have the rule:
.header-image .site-title > a {
height: 300px;
}
and you are not happy how it looks on mobile, change it with media queries
like this:
#media only screen and (max-width: 600px) {
.header-image .site-title > a {
height: 120px;
}
}
Just use the window width when you desire to use the change of height and be sure the rule is placed at the bottom of you css sheet.
Figured out my issue. I ended up applying this specific code:
#media only screen and (min-width: 600px) {
.header-image .site-title > a {
height: 300px;
}
}
It left the logo sizing alone for any screen size below 600px. But for anything 600px and above, it made the logo height 300px, which is exactly what I wanted. The padding around the logo image on mobile devices is no longer there.
I have the top margin added to move down some widgets down that are stuck under another graphical element. On mobile, these widgets move to the bottom of the page (instead of the sidebars).
How do I remove the additional top margin css I added to move down the widgets:
.widget_peepsowidgetlatestmembers {
margin-top: 300px;
}
This moves them down, but I need to remove this for tablet and mobile screens cuz it's a waste of space. Thanks!
Here is how you can apply css rules on specific range of screen width (eg. 0 to 768px wide)
#media screen and (max-width: 768px) {
.widget_peepsowidgetlatestmembers {
margin-top: 0;
}
}
I'm using wordpress and I used CSS to make the width of my 'About' and 'Contact' page more centered and smaller by adding padding. However, when I do this, in the mobile view especially (I think tablet is okay), there is white space on both sides because of it.
The theme that I am using is built like that I think and I could not really find something in that theme that makes the elements appear smaller width and centered on the page so I used padding instead to make it appear the way that I want.
'Contact' page of my site in mobile view
'Portfolio' page of my site in mobile view
Here's a link to my website: http://www.lisaweng.com/contact/
Is there a CSS that makes those pages appear normal or full width when viewing on mobile view even if I add padding, like how the portfolio page views full width on mobile even though it has white space on both sides of the screen when viewed on the desktop version?
P.S. for the CSS for the padding of the 'About' and 'Contact' page elements, I did use percentages rather than pixels. I am not sure why it's not entirely responsive when viewed in mobile view.
Here's what my CSS looks like for the 'About' and 'Contact' page:
.cf7_custom_style_1 {
padding-left: 20%;
padding-right: 20%;
}
and
.aboutme {
padding-left: 14%;
padding-right: 14%;
}
Is there a code to fix this? Or any idea why this is the case? If there is a code for the mobile view fix, is it going to be the same for tablet as well or does the tablet also have a CSS to fix the responsiveness to how it should be?
Using #media queries to add breakpoints in CSS.
You need to utilise media queries within your CSS code to add specific breakpoints.
Adding this to your stylesheet may help:
#media only screen and (max-width: 950px) {
.cf7_custom_style_1 {
padding-left: 10%;
padding-right: 10%;
}
}
#media only screen and (max-width: 600px) {
.cf7_custom_style_1 {
padding-left: 0;
padding-right: 0;
}
}
Using the above code adds break-points at 950px and 600px. Meaning that if the window size = 950px, change this CSS class to these properties.
Website: www.tarbooshla.com
When viewed on a mobile device, the search icon is not aligned with the rest of the navbar (the logo and the menu icon). How can I fix this?
I have tried updating all the themes and plugins to no avail.
It seems to be displaying exactly as intended with the current rule set. I'm assuming you want it to populate on the right? I was able to move it substantially with the padding property, however I don't think that's the best scenario for you. The search icon is currently not text at all, but a pseudo element displayed in an ::before scenario, if you want it to show up after when it reaches a certain size, I recommend having a media query that sets it to display:none; and an ::after pseudo element that displays when it gets to your smart phone #media and screen (max-width) size.
It is happening because of the limited space in mobile devices.So what you can do is go inside the header.php and put the search bar inside the main navigation bar along with home,about us, etc so search will appear once the user press menu button.or with the help of css,align the menu to the left so that search button can fit into the right.
This code may help you. Make sure to add this CSS code at a place so that it loads after all other css is loaded ( therefore taking maximum priority )
#media only screen and (max-width: 767px) {
#Top_bar .logo {
text-align: left;
}
#Top_bar .top_bar_left {
float: left;
width: 80% !important;
margin-top: 10px;
background: none !important;
}
.header-classic #Top_bar .top_bar_right {
top: 15px;
float: right;
}
}
I am having issues with my carousel using bootstrap3. The image itself is responsive, but I'm having a hard time figuring out how to make the caption, and button also responsive. Haven't had much luck finding a clear answer. See
http://windstarwd.com/testman/
View the above page, then make your browser narrow and you will see the issues
for the "page header" (above the nav bar) i was able to get the phone number (h2) responsive by adding:
#media (max-width: 767px) {
.my-header > div > h2 {
font-size: smaller;
}
}
But I am having trouble with the social media icons stacking and throwing off the site, and the carousel caption and buttons getting shoved off the top when in mobile. It would be ideal to have the 32x32 social icons show normally, but the 16x16 when < 768px
So I guess I'm having two issues here :(
You could use the same media query for the top buttons, like
#media (max-width: 767px) {
.socialIcons > img {
width: 16px;
height: 16px;
}
}
or use a second second icon bar that will be shown if the screen size is too small, hiding the big icons bar, with the bootstrap attribute .visible-sm and .hidden-sm (bootstrap doc).
For the carousel caption, you can once again use the media queries to set a different width when screen size < 768px, or define a width with percents instead of fixed size.
Hope I helped you.