I got a very plain photo gallery site. Every page only contains a image (600 x 400) or a image slider. I have problem with the look of my website on smartphone/tablet on landscape mode or even a laptop. Because the bottom of the image/slider will just be chopped off. So you need to scroll down to see the whole image. On my desktop or portait mode on small devices it looks good. I had like the image/slider be showing in a smaller size on those screens so you dont need to scroll down to see the whole image. Can someone help me with this? I built this with a twenty sixteen childtheme in wordpress.
Thanks,
Hazy
I recommend using Slick carousel. that's an easy slider initiator and will save you lots of time and adjustments: http://kenwheeler.github.io/slick/
For single images use the following css properties :
max-width: 100%;
height: auto;
Related
I have a very interesting issue and I would appreciate it if somebody could help me. I'm an experienced frontend developer but I have an issue that I wasn't experiencing before.
I'm working on a converting Figma to HTML/CSS and design is made in such a way that there shouldn't be vertical scroll at all.
Header - height 60px
Main Content - height calc(100vh - 120px)
Footer - height 60px
So basically header on the top, footer at the bottom and everything between is main content.
So here is the problem, when I inspect page in chrome dev tools on different devices everything is working properly(btw I'm on a MAC) but when I look at the page on windows laptop same resolution some content goes below the page and can't be seen since there is no vertical scroll. So windows laptop is set to 1920 x 1080 but with 125% zoom but even without a zoom it's not the same on windows and on mac, mostly because screen resolution is different based on device(I'm not talking on different resolution, same resolution for example 1920 x 1080) but not the same device, not the same pixel density.
So I think too many edge cases can be here and we can't know how is gonna look on all screens, devices...
I'm wondering is there a really something that can be done to make it look good on all desktop devices with the same resolution.
Hi I am using corner stone to edit my web site, in wordpress using X theme.
Everything looks great and find on all screen sizes except for those 1300px width and larger.
ON my front page I use background images on two separate sections and set the padding to a large amount of pxs to fill out. However on larger screen sizes the background images look very small.
To fix this I tried to use custom css
#media (min-width:1300px){
.custom { padding:500px;
}
}
Yet nothing changes, any suggestions to fix this issue?
Thanks
On your wordpress dashboard go to Appearance > Customize > Layout & Design.
For Site Layout and Content Layout choose Full Width. Under Site Max Width, drag the bar to the far right. I believe the max is 1500px. This should solve your problem.
I'm using a wordpress theme and i'm having difficulty with the mobile render. The company who owns the site (mythemeshop) are currently unresponsive to my question.
The image slider at the top of the page has a title component. When looking at it on a mobile the title gets pushed past the image (because of the font size and maybe some other things that i'm not aware of).
I'm just wondering what I should do here - I'm not sure how to
Our site is similar to the site expert360.com - it renders well for the mobile. You can see how they have a larger header image for their mobile site.
Our site is coequity.com.au
It seems when I make changes to the css that work for the mobile site, it' looks bad on the desktop site.
Any ideas would be much appreciated.
Thanks in advance,
Sam
You could for example make the text smaller on mobile devices using viewport sizing, if you don't want to touch the image:
#media (max-width: 568px) {
#homepage_slider .flex-caption h2 {
font-size: 2vh !important;
}
}
I've had this problem in the past but at the moment i am unable to find the right fix.
We built this huge site over a year ago. At the time RWD was not even considered and it was out of scope.
Now, there are some minor issues the client want us to look into, so that the site doesn't look as bad on mobile devices.
The site in question is www.bombardier.com ( preview using a mobile device ). Basically the main thing that needs fixing is the backgrounds not covering 100% of the screen. They, correctly stay at would be the normal screen size, but because the content is much wider and not responsive, the page appears much larger while the main backgrounds ( body, header and footer ) appear to be cut short.
Any suggestions on how to make this look nicer ?
Thx.
Because your site has a fixed width of 960px all you need to do is add...
body {
min-width: 960px;
}
... this will prevent the body from shrinking down the the viewport width and cutting off you background on small screens.
I am using a modified version of the Quintus Theme in a self-hosted WordPress site. The site appears and works great on all browsers that I have tested, a windows tablet, and a windows phone. When I view the site on an iPad running the latest iOS version, the site is being squished to what I would assume is between 700-800px wide... all except for my custom header and slider. The blog title, menu and everything contained within the #page is not showing full width. I have beat my head against a wall trying to locate this needle in the haystack to find what could be causing this to display short of the width. I even tried some iPad emulators, however all those display the site perfectly. The actual iPad is not. I am not sure how to inspect the elements on an iPad since there are not any options on an iPad broswer to do so. Can someone please help me?
Blog... http://blog.modafabrics.com
Using the chrome emulator, i can't see any responsive CSS being used.
Your big slider area in the middle is set to a width of 1000px, whereas a iPad's resolution is only around 1024 x 768px. When in portrait you will be missing almost a quarter of the screen size.
The best way around it would be to start using percentages once you hit 1024px and to start making it responsive so it works on all devices, mobiles included.
Have a read on the MDN about media queries which are what are used in responsive CSS.
Link: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
EDIT
Ill see if i can get you started on making things a bit better.
These are all changes needed within your css which need to be applied within the media query for tablets
#page {
overflow-x: hidden; // stops the page being slid to right
}
#primary {
float: none; // removes the float style from the element (things can go above/under it otherwise)
}
#content {
margin: 0; // makes it full width
}
You will then need to decide what your going to do with the sidebar e.g. hide it or drop it below the content.
That should get you started on it. The best way to continue would be to use the chrome inspect element tool, you can then dig into each layer of the template and see why different things aren't re-sizing.