So I have been working on this for a few days and my brain is starting to die out. I did have another problem with the same website but that's sorted now thanks to some great help on here, so here goes.
The other day I was trying to create a sliding Facebook Social Slider for WordPress, but after a big headache I found one that I could modify slightly to suit my needs. The plugin in question is the "Facebook Likebox Slider by ARScode".
This works great on pc, but on mobiles its real nasty. Rather than going into detail about the problems I have with it on smaller resolutions, I would rather just completely hide it whenever the page is less that 960px wide. I would imagine this would be in the CSS of the plugin but I'm not entirely sure. What are your thoughts/recommendations? Is there another plugin that will do the same thing but hide itself on lower resolutions?
Any help is appreciated :)
Ok, i've messed with the link #88 MPG posted and found this class in common on those sliders.
I didn't test on all of them (28 examples o.O), but my guess is that this will work for you.
#media all and (max-width: 960px) {
.fblbForm {
display: none !important;
}
}
Related
I'm part way through a tutorial on Udemy for web dev, while simultaneously building a personal blog hosting on GitHub.
To make the text easier to read I would like to only use the left half of the screen on desktop, and the entire screen on mobile for all my pages.
What is the easiest way to do this?
So far I have just used html and JS for the page, and I think the solution involves CSS/Flexbox but not sure where to start.
In case anyone else has the issues, I ended up solving it with:
#media (min-width: 420px){
.container {
max-width: 420px;
}
}
Decided this was the most aesthetic and easy to read width.
Im helping out in cleaning up and renovating a website for a friends organisation/art place.
We are working on Gallery of images of the last years of business.
See link to one of the gallerys-> http://www.stallbergsgruva.se/2018-2/
My problem is when I view the page on mobile (Android and Iphone) the Gallerys melt together and don't display in a nice way. For example it would be nice to have them all in one column or two but atlas separated and not smudged together as it is now.
Im looking for some CSS code that takes care of this. I have tried a bunch of different codes I found on similar issues but nothing affects my gallery. Im new to this code so many I'm missing something?
Im a beginner at code but can handle it if you add a more thorough description of what code and where to add it, etc.
Thank you in advance! // Erik
This can be done by defining width in media queries. I see you have defined
.gallery-width: calc((100% - 16px)/2
Change it to .gallery-width:100% at the resolutions at you which need this result. More info about media queries can be found at
Media Queries
Code Screenshot inside colsole
So in your case let us assume upto 600px you need this result this is how the media query will look like which needs to be added to your css file :
#media screen and (max-width: 600px) {
.wp-block-gallery .blocks-gallery-item{
width :100%;
}
}
I am almost done editing a new website template I bought. I really like the site, but I have just noticed it seems to have been made for only one resolution type. So, if I view it on a lower resolution screen... I can't see the whole site (can't even scroll down!). Then, on a high resolution screen, the site is so small I can barely read the text. Any suggestions would be really appreciated. Below is a link of the original template so you can better understand what I'm talking about this.
There is something called media query in css where you can change the styling of your site based on the device.
If you want certain css styles for big screens then do this
#media(min-width:1200px){
.yourClassName {
//css style
}
}
Similarly for small devices,
write a media query for smaller devices.
Thank you.
I am working on two different responsive websites (both work in progress and one is taken from lynda.com just for practice). This first one I did works fine as far as I can tell.
The HTML is HERE and CSS is HERE.
Then I started to work on this one, created the same css as above but the media query targeting #media only screen and (max-width: 768px) is not loading for some reason.
HTML is HERE and CSS is HERE.
I've spent hours trying to figure out why and I'm lost. I don't any differences between the two, yet one is working and one isn't. Any suggestions you have would be much appreciated!
I'm just testing them in a browser right now.
Thank You!
I think the issue is one site has a "meta...viewport..." in its HTML, while in the other site that statement is commented out.
In the site with no "meta...viewport..." the Media Queries are actually testing against the dimensions of the unconstrained "viewport" rather than the "screen" (an oversimplification is "devices sometimes lie"). On the other hand in the site with "meta...viewport...width=device-width" the "viewport" width is forced down to be the same as the "screen" width before the Media Queries test it, so you get different answers (especially on smaller devices).
(Depending on what devices you're targeting, you may need to dive down into thoroughly understanding a "viewport". There are good reasons for the way a "viewport" behaves; please don't misinterpret my sarcastic "devices sometimes lie" to mean "viewports are a bad idea".)
Im trying to make some sort of liquid-fixed weblayout with CSS. The problem is that the site isn't very big, so when users with big screen resolution visits the site it looks very small and empty.So I need the menubar(which is located in the bottom) and some of the main elements to use some more screen space, when visited with larger screen resolutions. Sort of "scale to fit" can anybody help me out please?
My CSS styling as for now is just made as a fixed weblayout.
Read this: http://www.alistapart.com/articles/responsive-web-design/
and try to avoid using PX for widths, use % more :)
You might find this useful too, if you are looking for a cross-browser method for responsive web designs. It's called Respond.js:
https://github.com/scottjehl/Respond
There are also some good snippets and theory in this article from Smashing Magazine:
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Here is some more information from WebDesignerDepot:
http://www.webdesignerdepot.com/2011/09/the-ultimate-responsive-web-design-roundup/
EDIT: Updated with a nice new anything and everything roundup from WebDesignerDepot