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;
}
}
Related
Сan you help me remove a white strip of a few pixels due to which a scrollbar appears below ?
Thank you very much and sorry for my English. Please correct me !
Link to the site
Sreenshort of this problem
Your Breadcrumb Style has few issues with CSS. Please copy the below code and past into the Customizer ->Additional CSS :
.breadcrumbs {
width: 100% !important;
}
Hope it will solve your issue.
in your CSS You have
html.html-has-lrm
{
overflow: auto !important;
}
change that to
html.html-has-lrm
{
overflow: hidden !important;
}
and your white strip will no longer be visible..
as i can see you are using caching plugin so don't forget to clear the cache after making changes..
Hey I'm trying to add icons to my top navigation bar.
I have a plugin for social media icons, so I am trying to add the plugin shortcode to the nav menu. I downloaded a plugin to allow me to add shortcode to a menu.
Here is the shortcode I want to add: [feather_follow show="twitter, google_plus, facebook" hide="reddit, pinterest, linkedin, tumblr, mail"]
I tried adding size="16" to make the images smaller but it made them disappear completely. Please visit my site to see the results I am getting. Containers and sizing are all screwed up, I have no idea how to begin fixing this.
Can anyone take a quick look and suggest anything? I would REALLY appreciate it. I have already wasted hours and hours on this simple problem. My site is greenenvysupply.com
Try adding this
[feather_follow size="64" show="twitter, google_plus, facebook" hide="reddit, pinterest, linkedin, tumblr, mail"]
You should use percentages for making your icons smaller without losing the ratio of the icons. So you can write something like this in your main CSS:
.top-bar ul>li a {
width: auto!important;
height: auto!important;
}
.top-bar ul>li a img {
position: relative;
width: 30%!important;
height: 50%!important;
}
I have the website markedsføring på pizzabakker and I just can't figure out how to change the <h1> to be smaller on smaller screens. Can anyone please help me with that?
My CSS for the <h1> right now is just this:
font-family:'Coustard', sans-serif;
margin:0;
padding:0;
font-weight:300;
What should I do?
Matteo's code is correct. Try putting the code after the original h1 style.
If that doesn't help, try with:
#media screen and (max-width:360px){
h1{
color:white;
font-size:25px !important;
}
}
The other solutions are right but you can also try with this one. Alter the current CSS code to have 5vw unit which means it will autmatically calculate 5/100th of viewport width.
h1 {
font-size: 5vw;
}
You can use media queries.
The #media rule is used to define different style rules for different media types/devices.
In CSS2 this was called media types, while in CSS3 it is called media
queries.
Here is an example
#media screen and (max-width:360px){
h1{
color:white;
font-size:25px;
}
}
See this for information.
To develop responsive website I also suggest you to see Bootstrap
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
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.
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;
}
}