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
Related
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 :
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.
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;
}
}
Can anyone tell me how I can center the image thumbnail relative to the large image?
I can only edit the css, as I am using a proprietary cart solution: http://cailinshea.com/#ecwid:category=1200474&mode=product&product=4321711
Additionally; I can write PHP - but haven't touched Javascript in years... is there a better cart solution that I could implement with Wordpress easily? I am finding it increasingly difficult to customize the design of this wordpress site with ecwid cart.
Thank you for any help!
div.ecwid-productBrowser-details-GalleryPanel-imageContainer needs to be centered within div.ecwid-productBrowser-details-GalleryPanel. It's currently set to float: left, remove that and add:
margin-left: auto;
margin-right: auto;
That did the trick in Chrome's dev tools.
I really like Enstore, but it's not Wordpress. But yeah, this cart plugin has really ugly html...
following should work:
#ecwid_body div.ecwid-productBrowser-details-GalleryPanel-imageContainer{
margin:0 auto !important;
float:none !important;
}
.ecwid-productBrowser-details-GalleryPanel > div:first-child{
margin:0 auto !important;
}