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%;
}
}
Related
I have a WordPress website I'm coming to an end in finishing.
I want to remove the iPad format which is in the media queries (3 css files linked below) and I've toyed around with the pixels width here and there but everytime I remove or adjust them, I seem to just break the styling completely and not allow the website to continue the same layout from desktop.
3 CSS Files that are linked with all of this:
Layout.css - http://185.123.96.64/~curiouse/wp-content/themes/curiousegg/css/layout.css
Style.css - ( Inspect element, unable to post more than 3 links just yet)
Responsive.css - http://185.123.96.64/~curiouse/wp-content/themes/curiousegg/css/responsive.css
URL: (Self explanatory, only 2 links I can post unfortunately)
I'm happy with the responsive change for a mobile, however the iPad resolution (around 768px) I would happily do without.
I have spent a long time tweaking this through FTP so I've had to resort to some extra eyes to help look at this.
Any help would be appreciated.
Dev
The problem is that in a mobile first development, your base is the mobile css, then you add your rules for tablets, then on top of that your rules for desktop. So if you remove the tablet rules, you'll loose the style that desktop use as base.
Sadly there is no quick proper way to remove that breakpoint, though I guess you could do something dirty like setting your tablet media query to 767px and change your desktop media query to 768px to be sure it take over. Not ideal but it should work.
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.
Ok, so I am supposed to create an image gallery. The way I've envisioned it was for it to have a menu on the left, with the images appearing on the right, when selected from the menu. The menu would feature small thumbnails, and .... yeah, I wanted the site to feature a Responsive Web Design, where it would adjust itself should it be opened on a mobile device, but sadly I feel a tad overwhelmed by that.
What is my best way to approach this? I see some sites mention tips like
-make the mobile version first, and go from there
-be sure that the fonts change size depending on the screen size
And quite frankly, I don't even know how to make sure that my images are in the right size........ can anyone help? PLEASE!
Please check media query on CSS3 : http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You can set the size of the pictures with this... You can make a simple css rules for desktop and make mobile css rules for mobiles by using
CSS FILE:
// CSS RULES FOR DESKTOP
#media screen and (max-width: 300px) {// CSS RULES FOR MOBILE}
But I recommend you to include 2 css: one desktop and one mobile to be more clear.
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;
}
}
I'm reading some books and trying to create a responsive layout but still don't know how to cope with random windows sizes. I know there's a difference between devices and screen, I just can't figure out why can't control display when resizing the browser window.
It that a structure issue, wrong css code or I'm forgetting something?! I need to add mediaqueries for variable widths ranges?
An example:
I set most sizes for devices (1204px, 768px, etc) works ok, but variable widths seems to act strange. I added then a mediaqueries such #media screen and (max-width: 1100px){ ... } but still I get issues on 720px or 620px etc.
I use display snipets from here.
Thanks for any help!
Silly me, I just found out that my code was messed: I had mediaqueries on wrong order so classes end up being ignored. Please refer to this topic.
Thanks you all!