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;
}
}
Related
I've been scouring the internet and Squarespace forum for answers to this problem, but so far can't find any luck! I understand basic code and CSS but can't seem to figure this one out myself :(
I'm trying to make a line of anchor links on an Index with equidistant text links on a line. When I view what I have now via Tablet or Phone view, they get broken up in a janky way.
Is there a way either: restrict this so they stay on one line or adjust in a way so they neatly stack on top on one another?
I'm trying to recreate something to the "Community Workspace Progamming" link effect here (https://www.the-wing.com/why-the-wing/)
The images of what's going on with my site in Tablet view are attached.
image here
If you're looking for simply stacking them on top when the screen becomes smaller (like in a phone or tablet, then this will do:
.menu li {
list-style-type: none;
display: inline-block;
padding-right: 30px;
}
#media (max-width: 760px) {
.menu li {
display: block;
text-align: center;
}
}
<div class="menu">
<li><h2>LOCATIONS</h2></li>
<li><h2>EVENTS</h2></li>
<li><h2>PERSONAL STYLING</h2></li>
</div>
It changes according to screen size, so it's all in a line in screens bigger than 760px, and it becomes stacked in smaller screens. You can change that size at the #media to suit your needs.
However, the site you've linked is using what's called a burger menu. Here's a good implementation that I found online, but it's a bit more complicated to implement.
I don't know anything about Squarespace, but if I were you, I would look for my template's Burger Menu in the template's documentation. I hope this helps!
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.
I'm having trouble on a clients website.
In the header, I have their address and social media icons. Everything is the way they want it until the width starts to shrink to more of a mobile view. I've been trying to change the text-align of .social and .address from right to center when the small-12 grid size kicks in. However, for all my efforts, it either stays with one or the other and doesn't switch when the grid system switches.
I've deleted my efforts currently in hopes that someone can help me with a better implementation method.
You can use media-queries. Look them up here - https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Add the following CSS style to your website (either in the app.css file or any other file that you include in your target page.)
.social-icons{
float:right;
}
#media (max-width: 600px) {
.social-icons {
float: left;
}
}
The above CSS would float any element with class .social-icons to right by default.
In case the website is being viewed on a media screen which has a screen width less than 600px, would float it left.
This wordpress website http://www.sulu13.net/14 has a responsive logo and menu that I wanted centered in order to line up with the edges of the content below in the posts. So I added:
.tc-header .brand a { /* Logo */
position: relative;
left: 200px; }
.navbar .navbar-inner { /* Navbar */
position: relative;
top: 130px;
left: 380px; }
Upon adding this CSS, the screen gets a horizontal scroll bar and has white space (equal to the left: 380px) on the right side of the screen. Something tells me it has to do with the responsive menu button sharing the same classes, .navbar .navbar-inner as the non-responsive menu. I would change this, but my knowledge of PHP is limited so I wouldn't know where to start.
I've tried removing the JQuery menu itself, but this had no effect, (my guess is..) because I didn't actually remove the responsive menu button/menu.
Here's the main CSS file - http://www.sulu13.net/14/wp-content/themes/customizr/inc/css/green.css?ver=3.1.6
Any ideas would be appreciated, thanks in advance for your time.
Ian
width:100% (default width) + 380px (left value) = 100% + 380px
You would need to resize the navigation to compensate for the moving over if you want it to leave it the way it is, meaning something like width:calc(100% - 380px);
However, I'd recommend not using absolute position to be more responsive and not require the manipulation of values.
Remove the left:380px
Apply this:
#menu-my-menu {
float:right;
}
This approach also allows more list elements to be added and they will automatically be positioned correctly
Use this:
.navbar .navbar-inner { /* Navbar */
position: relative;
top: 130px;
}
So, remove the left:380px. I don't understand what you mean by centering the menu and aligning with the text below, as the container of the text is wider than the one of menu and logo together and if you align the menu with the post below it will not be centered anymore. But removing left property should give you what you want.
Thanks for the help guys!
I went back and gave it a closer look, turns out I was able to solve the issue with a wrapper and a few media queries for width adjustments.
I'm working on a site using the Bootstrap framework and noticed that on mobile devices there's an empty white margin on the right hand side of the window. I believe this is some sort of issue with the tag although I can't pinpoint it.
There are 20px margins but if I remove them the .brand logo shifts partially off the screen on the right hand side.
You can view the problem here.
Sorry to not provide the code here. I'm just not even sure which CSS to provide as I can't identify the problem.
In the block which had the heading 'Download original swipe files to ensure your success.' you have the text, an image to the side, and the caption 'one click download of swipe file'
The caption is actually a svg file and I think at some viewports it's too wide for the bootstrap column and it's disrupting the grid. I can't tell for sure, but you could try temporarily removing the caption and see what happens.
The behaviour I'm describing is most obvious when the browser window is around 780px ... it's always possible that we are looking at different things ;)
Good luck!
.navbar .brand has
margin-left:-20px;
so the behavior seems normal to me.
Set it back to 0 via your mediaquerie
edit : remove padding on body at :
#media (max-width: 767px)
body {
padding-right: 20px;
padding-left: 20px;
}
and margin at .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top :
#media (max-width: 767px)
.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
margin-right: -20px;
margin-left: -20px;
}