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;
}
}
Related
I have created a mobile menu on my clients website:
mBuy.nl
I am a designer and I work with WordPress, I have basic knowledge of CSS.
On tablet and mobile size I have a hamburger menu.
Mobile & tablet what it is now
Mobile & tablet how I would like it to be
I would like the mobile menu to be 100% of the viewport height.
Despite trying different methods, I can't get it to work.
Especially since I am using a WordPress theme I find it difficult to copy and paste any code here.
Thank you!
Add to your menu wrapper this code:
height: 100vh, or min-height:100vh
vh is taking the full height of page screen and make item full height, widht of it.
Replace this below code on line no 1853 in
http://acc-www.mbuy.nl/wp-content/themes/h-code/assets/css/responsive.css?ver=1.8.3
.static-sticky .text-right {
top: 0;
}
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;
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.
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.
I'm relatively new to programming and am struggling with some CSS. I have thumbnails navigation bar in my site (#thumbnails_wrapper) and want to hide it completely when the screen size drops below a width of say 700px.
With my limited CSS knowledge, I've tried to have a go myself, but the following code just hides the wrapper completely on any screen - including a full sized desktop screen.
#media (min-width:700px){
#thumbnails_wrapper {
display:none;
}
}
Any help much appreciated.
Thanks
Jack
Your current CSS is targeting anything with a browser window width GREATER than 700px.
Change min-width to max-width
#media (max-width:700px){
#thumbnails_wrapper {
display:none;
}
}