I have a question regarding an image box from Woocommerce. I already tried several things but it looks like a bug. On desktop the products boxes are nice, but on tablet or mobile, the left ones becama a lot smaller. The website is: https://meerdaneenlintje.nl/product-categorie/lintjes/ .
If anyone has an solution I am glad to hear that!
Kind regards,
Joppe
The problem is with the margin added to the first and second columns. The last column element does not have a left margin.
#media (min-width: 545px) and (max-width: 921px)
.woocommerce[class*="columns-"] ul.products li.product:nth-child(n), .woocommerce-page[class*="columns-"] ul.products li.product:nth-child(n) {
margin-right: 20px;
clear: none;
}
Removing the margin for the first columns fixes the problem :
Related
I have a problem with my website. (www.cemf.ir). The footer has three columns and everything works fine (links are clickable) when it has three columns. However, when I resize the browser and the width gets smaller, the number of columns in the footer becomes one and only the links in the last part of the footer works. I guess there is something wrong with .column-wrapper class in the css when the screen width gets smaller. Can anyone help me?
Setting the float of the last column wrapper should work.
#media screen and (max-width: 767px)
.site-footer.three-col .column-wrapper:last-child {
float: left;
}
For some strange reason whose cause I can't find out, the very last .column-wrapper in the footer covers (although transparent) almost the whole screen on mobiles, including most the other footer elements, and also doesn't let any mouseclicks through.
In the browser code inspector adding the following CSS setting made the links in the other footer elements clickable:
#recent-posts-5 {
pointer-events: none;
}
I could find a good solution for it. I used z-index property as you see below:
#media screen and (max-width: 767px)
.column-wrapper:last-child {
z-index: 1000;
}
.column-wrapper:nth-child(2) {
z-index: 1001;
}
.column-wrapper:first-child {
z-index: 1002;
}
z-index put columns layer on layer and the problem of the last column-wrapper was solved, since it is now under all the columns in the footer.
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 have a serious problem with certain parts of the woocommerce storefront's responsive theme when using mobile screen devices. I am unable to use 100% of the width of the mobile device’s screen for the related products area. I’d like the 2 columns to take advantage of the screen’s width. Can anyone help me with the css code, please? See image below
The same applies to the widget section below.
Can please anyone help?
The link for the page I need help with is https://www.samuelsotiega.com/product/sunrise-at-el-prado/
Thanks in advance
Using css you can "fix"
.sp-designer .widget-area .widget {
margin-right: 0; }
.sp-designer ul.products li.product {
margin-right: 9px;
}
If need use !important to override rules
I designed a responsive web page for tutorial and I have a trouble with unnecessary padding.
http://zinzinzibidi.com/res
In this page when you decrease the your browser window resolution, you will see the horizontal scroll bar (overflow-x) in some resolutions. I am trying to understand but I can't fix this trouble for a few days.
Here is an example picture of my trouble:
My CSS codes here: http://zinzinzibidi.com/Areas/res/Content/css/style.css
My media screen codes are
What am I doing wrong?
It appears that an inner item is causing the issue. Remove the padding from #header-main-buffer and it should go away.
line 515 of your file:
#header-main-buffer {
width: 300px;
padding: 0 10px; <- this is your problem. remove it and it will be fixed
...
I checked your code and it might be your <div id="header-logo"> the one creating that extra padding.
Since the img has a fixed width of 300px on screens smaller than tit will create an extra padding to the right so it fits the screen.
Try reducing the
#media screen and (max-width: 479px) and (min-width: 320px) {
#header-container {
width:;
}
}
EDIT
Basically check all the img that you're using so you make sure their width is appropriate and they fit the screen.
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;
}