I've set up a WooCommerce shop and it seems to work properly on desktop:
https://www.barefoottravelling.de/prints/
If I check the same shop/page on my mobile phone I can't see any products unfortunately. I've searched for advice a couple of days but couldn't figure out the issue.
Can anyone help?
In your css file, you have this property defined as:
#media (max-width:480px) {
.woocommerce-posts-wrapper .woocommerce-shorting-wrapper p {
display:none;
}
etc etc.
That means, if your width screen is less than 480px, the items will disappear. You can just remove it.
This is how it looks for me after removing it (You see that the items appeared).
Related
Never used CSS before and was pleased to find how to change the header color, it worked great.
Now trying to remove or at least reduce the white space between the page title and the header(?) where my logo is.
Read the similar question but the suggestions didn't work for me.
I also want to make the PAGE TITLE itself smaller as it looks too big on a mobile phone, have tried pasting various bits of code that I've found in searches but nothing has worked.
I'm in my 60s and am not very techy so please be gentle :)
Many thanks in advance,
My site is: www.andypiggott.com (Astra theme)
First, you need to head over to the Appearance » Customize page from your WordPress dashboard, The tab will slide to show you a simple box where you can add your custom CSS, now add this code:
.ast-plain-container.ast-no-sidebar #primary {
margin-top: 0 !important;
}
For page title you can paste this code :
#media only screen and (max-width: 600px) {
.entry-title {
font-size:20px;
//or what ever the font size you want to be on mobile
}
}
I need to change the grid size of a wordpress widget. It currently has a grid size of medium-8 and would like to change medium-6. Its on the home page of the site and has a class of home-middle-left. I'll attach a picture of the markup from the chrome console. If you need any other details, let me know. I can't think of anything else to add. Thanks ahead of time for any help.
Html Markup of widget
Can you access the HTML?
If you changed it to medium-6, the row won't span full width because the right column is still medium-4.
You could use CSS.
.home-middle-left {
#media (min-width: 600px) and (max-width: 1024px) {
width: 50% !important;
}
}
You will need to wrap that in a medium query though, but this depends on your website settings so I cannot add this. But it will be something like the above.
I use WP 4.9.2 and Leto theme from aThemes. The site that I built on it looks great on bigger screens, but is really screwed up in mobile. I checked the stylesheet - the problem is related to the #media queries. I just don't seem to be setting in the right way ( the css). So, I need to know how to style or what css to use to set the thing up. The theme I use is Leto, and I use WooCommerce plugin. So the responsiveness of the site is perfect on all pages but this one, which in my opinion, utilizes WooCommerce. Anyone anywhere any help is welcome.
Here is the you can look up the whole stylesheet -->stylesheet. You can download the theme in the first link, which was to Leto.
You can use media query:
#media only screen and (min-width:280px) and (max-width:480px){}
#media only screen and (min-width:481px) and (max-width:619px){}
#media only screen and (min-width:620px) and (max-width:767px){}
like :
#media only screen and (min-width:280px) and (max-width:480px){
body{
do_stuff_here
}
.wrapper{
do_stuff_here...
}
}
OR Please read :
https://codex.wordpress.org/Styling_for_Mobile
My site is the following:
http://www.evarancho.com/
The problem is that the email on the header is hiding when you make the screen smaller. I don´t know how because it was not happen before and it just started out of nowhere.
I have tried this css line but it is not working.
.w-text-h{display:show !important;}
I don´t know what to do. Any help is appreciated.
Thank you!
I see it on the screen in mobile.
Anyways, display: show is not right.
Try display: block !important
It is difficult to narrow down.
I suspect this is the issue:
#media (max-width:600px) {
.header_hor .l-subheader.at_top {line-height:36px;height:36px;}
**.header_hor .l-header.*sticky* .l-subheader.at_top {*line-height:0px;height:0px;overflow:hidden;*}**
.header_hor .l-subheader.at_middle {line-height:50px;height:50px;}
.header_hor .l-header.sticky .l-subheader.at_middle {line-height:50px;height:50px;}
.l-subheader.at_bottom { display:none; }
.header_hor .l-subheader.at_bottom {line-height:50px;height:50px;}
.header_hor .l-header.sticky .l-subheader.at_bottom {line-height:50px;height:50px;}
The line height 0 and all all that would definitely be a problem and I believe it is set to sticky (in the us.headerSettings javascript source on the page, the header is set to sticky). A possible quick fix, rather than editing the CSS (suggested process mentioned below), might be to make the header not sticky in the settings. Though I'm not familiar with this theme, so I can't be sure that that will fix it, but it's a good bet.
If not the above, this might be the next place to look:
#media (max-width:600px) {
.ush_text_3 { font-size:13px; }
}
.ush_text_3 { white-space:nowrap; }
Perhaps the nowrap is causing an issue? I'd see what happens if it's removed.
These changes can be made in the css style file directly with to issues: 1. if you break it it's not easily recovered and 2. you'll lose changes with theme update.
Usually, making a child theme and adding the custom changes in the child themes style is recommended.
This can be done with one of many wordpress child theme plugins. I recommend Child Theme Configurator
There's also an error with the color in the css file, but it isn't the issue as it's just ignored:
.ush_text_3 .w-text-value { color:; }
(see errors here.)
I've been given the task of customising certain elements of a site which is using Twitter Bootstrap 3.0.2.
The site will be using default Bootstrap styles and responsive layouts except for a particular custom CSS theme file whose modified styles will only be applied when certain users access the site via certain means.
In any event, I need to disable just the .xs responsive layout and nothing else. This means that the screen must retain a small screen layout on resolutions below 767px.
I've looked at many answers on this site and the closest one is this one that describes editing the existing bootstrap.css file.
I don't want to edit the core bootstrap files but simply want to override the .xs layout in a custom CSS file that is called after the bootstrap file.
I'm not sure how or what I should be editing as the media queries look like the following and it's a bit confusing to me.
#media (max-width: 767px) {
.hidden-xs,
tr.hidden-xs,
th.hidden-xs,
td.hidden-xs {
display: none !important;
}
}
#media (max-width: 767px) {
.hidden-sm.hidden-xs,
tr.hidden-sm.hidden-xs,
th.hidden-sm.hidden-xs,
td.hidden-sm.hidden-xs {
display: none !important;
}
}
Any and all answers are greatly appreciated.
Thanks in advance.