I have a problem creating responsive design of my website. When I resize my browser window to specific width the header dissapers and only body part shows up. Here is the link to my blog website: http://alpha1.dentalblog.az/home/ when resized it won't show you the menu and header logo part. (tablet size or mobile size). Any help is greatly appreciated.
In responsive.css, you have this style:
.hidden-phone{
display:none !important;
}
Specifically called when the page is less than 767px.
Line 180 you need to remove or change.
Related
Web page before zoom in
Web page after zoom in
When i zoom in my web page that time two side bar menu div overlapping, How i stop that overlapping .Please help.
Please see left bottom footer div and left side menu bar .This two overlapping after zoom in
Zooming in/out changes the resolution so first if your website is not responsive, you should stop zooming in/out.
If above is not the case and you want to fix the issue and as the question is not tagged with any responsive UI framework like bootstrap, assuming you are using only html+css, you can go for media query css
Using media query CSS you can handle CSS of any specific section for different screen resolution, below is an example:
Let's say if the browser window is 600px or smaller, you want to change the background color to light blue, then you can use below media query CSS:
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
I am working on a website and so far I am satisfied with it's desktop view, but it has an issue on mobile and tablet view. The image in the full width slider is not displaying correctly. Is there a way to shrink the image in the mobile and tablet view only or is there a way to position the image so it fits to screen. The website is built with divi theme, wordpress. Thanks.
The Website Url: www.thenextlevel.ng
Using the Divi theme full width slider the image should automatically adapt to the screen size if you add it in this way:
Add new full width section
Add full width slider
Open the settings for the full width slider
Under the "content" tab, at the top, click "add new slide"
Click "add media" and add the image and save.
If it still isn't adapting correctly to the screen size, you could try going into the full width slider settings and adjust the width of the image. When you move the width slider a little mobile phone icon will show up and you can adjust the width on mobile and tablet. If that does not work, you'd probably need to use some css.
I've been trying to fix the width of a mobile view. The below linked page displays correctly on most devices (more than 400px wide), but has a margin on the right side of the header on devices with less than 400px horizontal, like the Iphone 6, Iphone 5 and Galaxy S5. The html element says to be the same width as the screen, but when hovering over it, the visual indicator displays otherwise.
I've tried hiding elements to see which element is the problem, but I have not been succesful in finding the problem. I'm hoping one of you might have some insight in the problem at hand.
Screenshot of the problem:
In this screenshot the header is not full width, while the content is. So the problem seems to be in the header somewhere.
The page is https://www.matrastopper.eu/bestellen/.
I'm assuming some part of the page is scaling problematic on small screens, but I can't find which.
change this width
.no-columns .box.right {
background-image: url("/media/layout/box-right.gif");
width: 380px;/* change this width */
}
this css
https://www.matrastopper.eu/css/screen201410.css?
line no 836
I've created my first sexy menu using CSS and HTML, but how can I make it automatically re-scale in size depending on the screen size. When viewing the webpage on and iPad the menu goes off the page?
http://ahdecor8.co.uk/menu/
You can specify diffent CSS style options for different screen sizes, please check the url below to see how to do this:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Is there a way to make a sidebar collapse to the bottom of the page without any JavaScript when the browser reaches a certain size.
I'm creating a responsive theme that can be seen at http://flexibletheme.tumblr.com/. By resizing your browser window to below 600px, the theme goes into a linear version (just resize your browser smaller until it changes to this).
At the top the sidebar changes into a full menu, and this is the part which I want to go to the bottom instead of staying at the top.
The relevant parts of the CSS code are #media screen and (max-width: 600px) [this tells the browser to use the specified CSS when the browser is less than 600px], the sidebar using the HTML 5 element called , and each post is wrapped in .
Have you tried moving the entire aside block underneath the container? I'm still learning responsive web design myself, but my understanding is that if you structure your html for the smallest size you want to accommodate, you will have a cleaner layout with less hacks.
Place your sidebar inside your #container div and float your section left and your sidebar right.