edit: added a link to jsfiddle, http://jsfiddle.net/h280xb6p/
Im currently practicing responsive design. Whenever the browser window gets below 400px the structure of the content change.
I have this menu that I use the structure of <a>. What I need help with is to change the html code from <a> to <option> whenever someone with a max-width of 400px or lower enter the site.
I know it's possible to change the appearance, like CSS rules with media query, but is it possible to substitute html code with another html code?
Subject: #menu
#media (max-width:400px){
section#box1, section#box2{
float: none;
width:100%;
}
section#menu {
}
}
To answer your question: It's for sure possible to subtitue html code with some other html, this i something you want to do with Javascript/jQuery. You CANT do this with CSS.
To solve your problem you should make 2 elements, one normal menu and one select element. Then show and hide them depending on screen size, take a look at this fiddle http://jsfiddle.net/77khhzpx/
#media (max-width:400px){
section#box1, section#box2{
float: none;
width:100%;
}
#menu {
display:none;
}
#mobile-menu{
display:block;
}
}
Related
Can someone please help me edit the CSS for this website of mine for mobile sites, on the homepage?
Keep in mind that this is done through Wordpress and the theme I am using does NOT allow me to edit the theme CSS itself, however, I am using a plugin that allows me to add my own custom CSS to it. Take a look at this if you don't understand.
Please help me out. I've been trying to center all of the text in each sections for mobile but nothing is working someone help!
I can add code if needed be, thanks!
try putting this code on your site. It should fix the "Proven Success" section on mobile.
#media only screen and (max-width: 667px){
.categories .module-title {
left:0px !important
}
.categories .module-subtitle.font-serif.home-prod-subtitle {
left:0px !important;
}
.section-overlay-layer .module-subtitle.font-serif.home-prod-subtitle {
margin-left:0px !important;
}
.module-subtitle {
margin-left:0px !important;
}
}
We have an element with a page-wrapper id. I have tested that changing the margin on this element does, in fact, remove the margin on the actual page:
#media (min-width: 768px) {
#page-wrapper {
position: inherit;
margin: 0 0 0 220px;
}
}
My goal is to keep the margin for the standard page, but remove it when printing, so I tried this:
#media print
{
#page-wrapper
{
margin: 0px !important;
/*display: none !important;*/
}
}
The display:none comment there is just to show that it does, in fact, hide that element for printing, it was there a part of my testing. However, the margin does not get changed like it should.
I am out of ideas on what I might be doing wrong, so I am hoping someone has an idea. We do NOT have any other #media print styles on the page, but do have other #media min-width styles, but as far as I know #page-wrapper should override them all for print.
Any ideas?
Edit: Setting background-color:red; doesn't seem to work as well, only hiding the element from view with display: none works.
Edit 2: I do set the #media print absolutely last in the stylesheet, not that it should matter since it's the only print style and uses !important, but still worth mentioning as one more thing to check off.
Edit 3: When inspecting the element, the only margin style applied is the style shown in the first code snippet. The #media printstyle does not show up at all when inspecting the element.
When I needed to tackle something similar, I created a PDF of the section of the page first and then I could print it if I wanted or I could email it instead. To adjust the margins for a PDF, you would use the #page selector. So, my embedded CSS would be:
#page{margin:120px 50px 80px 50px;}
It may or may not work as I haven't tried printing directly from the page, but that may offer another route to the same end goal.
I am not a web designer & I do not understand the CSS code very well.
what to edit in the famous mx-fluity blogger template to produce (multi-level) menu on both PC browser and mobile browser with the same style.
thanks in advance.
If I understand correctly, you don't want the menu to switch to a "mobile menu" (drop-down). Or do you want the navigation to be a full-width dropdown all the time?
If you want the navigation to remain as it is on the desktop as long as possible you need to look at the media queries.
Somewhere you'll find:
#media only screen and (max-width: 767px)
Look for the selectors called: #navinti and #mobilenav
You need to prevent #navinti from being hidden, and the same time disable #mobilenav
They currently look somewhat like:
#navinti {
float: none;
...
}
#mobilenav {
display: block;
...
}
Set it to:
#navinti {
float: left;
...
...
}
#mobilenav {
display: none; /* You might have to add an !important to this */
...
}
At #navinti erase:
background-color
-moz-box-shadow
-webkit-box-shadow
box-shadow
If your navigation isn't wider than the one on the template, you should get away with this down to 500px (width), from there you can hassle your way to say 460px width padding & margin... Unless your navigation has only 2 or 3 points there's not much of a chance you will get it squeezed onto a mobile screen.
Forgive me if I've worded the question wrongly. I'll try to explain my question briefly and accurately. First of all I am using an online website builder for my website called PortfolioBox.
What I am trying to do is clip an image within a container without the image automatically re-sizing itself to fit to the width of the container. The code I used is simple:
HTML:
<div id="imageContainer">
<img src="http://www.kirupa.com/html5/images/circle_colorful.png">
</div>
CSS:
#imageContainer {
background-color: #333;
width: 350px;
height: 200px;
border-radius: 5px;
overflow: hidden;
}
The following code should result in something that looks like this:
http://www.kirupa.com/html5/examples/clipping_content.htm
However, if you check the result of the same code on my website you will see that the image being clipped is shrinking to fit the width of the container:
http://roryhammoud.com/test-new
Because I am using a webhost/builder, the pages come prebuilt with CSS code. There must be something in the preloaded CSS that is causing this. I however don't have access to that CSS code.
The Question
So my question is, is there anything that I can do to override this issue?? I do have the ability to add CSS code to pages, so I am hoping I can override it somehow. I would greatly appreciate any help..
Here is the page on JSFIDDLE http://jsfiddle.net/0e5nda2b/ (Please note I cannot remove CSS code, I can only ADD)
Thank you in advance.
You have a CSS rule in your file that sets the max-width to 100%. Remove it.
.textContent object, .textContent embed, .textContent video, .textContent img, .textContent table {
max-width: 100%;
width: auto;
}
If you can't simply remove that rule, create your own that sets the max-width to initial and make your rule more specific, or use !important (not recommended). For example, #imageContainer img {max-width:initial;}
Because you are not able to modify the existing CSS, you must override it.
You need to be more specific with your selectors to target the element in question like so:
#imageContainer img {
max-width: inherit;
}
I have a problem at my Website.
I want to "print" text on the left of an image. But I dont know how to do this.
Here my Site: link
Here how it should look: link
Can someone help me please?
Replace the img tag with:
<img src="http://martin-fischer.tk/assets/img/AVRStick.png" style="float: left;">
<p>Here the text</p>
Demo.
Update: As per the attached image to align the text with image you could use float:left. And your layout won't broke so you have to clear the float either using clearfix Method or you can use overflow:hidden on parent div. In addition to be safer side you could display:inline-block.
By Using #media query you can create a stylesheet for screen, mobile and even you can control the elements while printing the document. Have a Look at the DEMO.
In this example in print preview you can see the changes. Elements position is change for print and the font will turn red.
#media screen {
p {
font-family: verdana,sans-serif;
font-size: 14px;
float:left;
}
img{float:left;}
}
#media print {
p {
font-size: 20px;
color: red;
float:right;
}
img{float:right;}
}