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;
}
Related
I have a question about responsive pages. I have a page for my website which looks fine on an apple macbook air. However, when I looked at my website from my mothers laptop, the screen cut the homepage partway off, because her screen is smaller. I have responsive images and used media queries for small screens, but I can't seem to make my page look good when it's on a smaller screen. The images do resize when I change the width of the screen, just not if I only change the height. Why not? I tried to fix this by doing a media query for only small heights, but that doesn't work either. How can I make sure my page also looks good on smaller heights?
If you need code I can post it or send a github link, one or the other. :)
You can take the height of the div by jquery and set the height to css. You can follow the below code and customize at your own way.
$(window).on("scroll",function(e){
var scroll = $(window).scrollTop();
if (scroll > 100 ) {
var height = $('.height-of-the-div-you-want').innerHeight();
// alert(height);
$('.set-this-height-dynmicallty').css('height', height);
}
});
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'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;
}
}
I am relatively new to web development, I am wondering if anyones knows off hand a simple solution to making the page I have under development dynamically resize to the window size without distorting the layout. I would also like to try to have the page centered as well, the problem is I tried centering it but as I resized the window the elements on the page moved out of place. Any help is appreciated.
I went ahead and put the code up onto a server so it can easily be viewed I did this mainly for testing. The project is voluntary and will eventually be used as part of a language education tool. I am just trying to get the layout so that it will resize dynamically without distorting the layout.
With the current setup I have to manually zoom out if the screen resolution is low to get the layout to fit properly within the screen.
I am currently using absolute positioning in CSS to position the page elements relative to the background image, they need to be positioned properly to fit into the background pattern.
The page can be viewed at http://www.kapacitive.com/Main_Page_Template.html will have to view the page source to view the code.
Once again any help is appreciated and please if you do not have something helpful to say please just don't even respond. Thanks.
To achieve a somewhat dynamic layout, you can use CSS3 media queries:
#media (max-width: 800px) {
foo {
...
}
}
#media (max-width: 500px) {
foo {
...
}
}
They target specific screen sizes.
Remove the width on the body and set these styles to your main Nav Cubes:
#mainNavCubes {
position: absolute;
left: 50%;
top: 170px;
margin-left: -240px;
}
This will set their position to the middle of the screen and with the negative margin you can push them to the left.
I've found the Web Developer extension for either Firefox or Chrome
Check following link:
https://chrome.google.com/webstore/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm
very useful for measuring both window and viewport size. It also allows you to set the window size according to a few default sizes.
(It has a whole load of other useful web dev tools as well.)