I picked Kadence theme for my blog and so far i'm loving it but currently i'm facing a problem when editing the single posts page.
I want to have "boxed" content style on desktop which looks better than full width in several smaller screen computers and full width content style on mobile only.
The theme's default editor only gives me the option to switch to either one, it's not possible to choose a different setting for each device.
When browsing on mobile with the "boxed" content style there's a huge margin which makes the content appear too narrow, this is fixed when setting content style to "full width". But with this option selected the desktop version's content is way too wide for some smaller computer screens.
I've tried using "additional css" in the customizing options present in my theme and put some code I found after a quick browsing session but so far nothing worked as intended.
Any sort of help with this will be appreciated.
Thanks in advance.
you can use media query css with single post type class.
#media only screen and (max-width: 767px) { .single-post target-class { //CSS code }}
Related
I built website on divi for a while now. I tried many times to change Divi built in responsive settings.
Most of my bugs are on effects, like moving up and down according to screensize; when it work out on a 13 inch it's totally messed up on a 27 inch
But my main problem is that the phone version goes from 320px up to 768px which is not adapted for little tablets.
I'ld like to change that built in breakpoint settings to something like 500px max for mobile version and then have a little tablet version from 501px to 1099 and have a classic pc version from 1100px to 1650px and then have a big screen setting... That would be nice to make it perfectly responsive.
Do you have any idea ?
If there is no solution through divi builder, is there any chance to do something through CSS ?
I've tried to reach Divi's expert on Malt but they were not able to answered me.
I've tried some CSS but it didn't work out. I know that it is possible to customise some sections, row, column to a specific screen size and sometimes I managed to do what I want sometimes thanks to that.
I also tried to look at the .php files but I've to say : I'm not an expert... and didn't find anything.
I was expecting to be able to customise divi's breakpoint with my own value.
To do something like that : I'ld like to change built in breakpoint setting to something like 500px max and then have a little tablet version from 501px to 1099 and have a classic pc version from 1100px to 1650px and then have a big screen setting... That would be nice to make it perfectly responsive.
I've been having the same problem for years now. Divi doesn't really seem to care at all about the fact that responsiveness has become a lot more complicated than just two breakpoints. I haven't found any helpful plugin or extension that's free.
You might want to look at this one: https://www.peeayecreative.com/product/divi-responsive-helper/ I haven't bought it myself but it seems to have everything I want to customize the breakpoints.
But still today I just use CSS in the Theme Options of Divi to create my own breakpoints.
For example, the menu changes to a hamburger at 980PX but this screws it all up 'till you get to about 1200px. So in the CSS is use this:
#media(max-width:1200px){
.et_pb_menu__menu {
display: none !important;
}
.et_mobile_nav_menu {
display: block !important;
}
}
Also, Divi tends to hide empty columns, even if the heave a background and a set height. So I always give those columns a class of divi-hidden-100pr or divi-hidden-50vh depending if you can set the height on percentage or if need need to set the height yourself. Then in Theme Options this is my CSS:
#media(max-width:1200px){
.divi-hidden-100pr,
.divi-hidden-50vh {
display:block !important;
}
.divi-hidden-100pr {
height:100% !important;
}
.divi-hidden-50vh {
height:50vh !important;
}
}
In this case the heigt is 50vh or 100% you can set the 50vh to whatever you prefer.
Maybe the reason why your CSS didn't work is because you did use !important
I know that it's a CSS crime to use this, but Divi doesn't seem to care and uses this a lot. So if you don't use it, your CSS probably won't work.
Problem however with this custom CSS, you'll still get you're margins, paddings, font-size etc set for the desktop. So pretty soon you custom CSS in Theme Options wil grow bigger and bigger and you'll have to change some desktop design settings to make your responsive custom CSS work
For example:
If you want a different font-color on a device you should set the font color for desktop in the custom CSS part of the module, not in de Design tab. If you set it in the Design tab it will bet set with !important and no matter where you put you're custom responsive CSS, it wil always be overruled by the Divi settings.
hope this helpen you a bit. Hope Divi will realize soon that there's more than 5 devices out there with different sizes.
The website is https://www.alisamesseroffphotography.com/ and the mobile site margins look awful. We use PhoPhoto in Wordpress, and cannot figure out how to add some margins.
Thanks so much!
What mobile site?
It's literally the same site.
You need to look at ditching or changing the theme.
As the other answer says, look at media queries : using a media query you can change how the page displays depending on the screen size it is viewed on. For instance, you could use this to add padding to the article-content class to force there to be white space around all the content on the page (but not the navigation or header image) which I think would solve your problem.
I think you should probably change the theme, something based on bootstrap would do a lot of the styling on a mobile device for you, and would make the navigation work better.
WordPress already allows us to create multiple menus and edit their items. I would like to offer one kind of menu (with more items) to my users coming from desktop browsers and a more condensed menu to user-agents which reveal that they are using mobile browsers.
My theme is already using a responsive menu which shrinks it when the screen size is too small, but I'd like to take it one step further, since I have a bit too many options in my main menu to make for comfortable browsing on mobile.
If you are only to subtract elements, not add anyone new, I would go about this using pure CSS.
An example:
#media screen and (max-width: 700px) {
.menu_element1 {
display: none;
}
}
If by 'one step further' you mean displaying a totally different menu, not just subtracting, but also altering or adding new elements, you could probably create several menus and load the correct one using wp_is_mobile(); Althought from Codex it seems this is not recommended, since tablets are considered mobile devices - and probably isn't bulletproof in other aspects either.
A third alternative would therefor be to use Javascript to determine the screen size and load the appropriate stylesheet.
I have been trying to learn how to design web pages using responsive web design. I have come across an interesting example that I do not understand:
http://www.sixty-nine.us/collections/general/
On this page on a desktop you will see gifs but when you shrink the browser enough you will see still images.
I thought this type of change in content was not possible with responsive web design because it can only control the style not the content. I was hoping someone could tell me what is actually happening here, and if my conception of the limitations of responsive web design to not change content is correct.
Any responsive design is based on #media CSS queries where you can choose which style should be applied on elements on which screen sizes (CSS approach)
Or using some JS code which monitors window width and shows/hides some elements or does what it should do. (JS approach)
They are actually looping videos and not gif. If the resolution is low the video is hidden, and jpg shown using display:none. Check the end of their stylesheet: http://cdn.shopify.com/s/files/1/0515/5693/t/2/assets/legend.css?7907595077267123575
They are using #media to control how it is shown on different devices. Read more about #media here:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Responsive web design is a wide variety of information on the Internet ,and the information is abstract,philosophical,and anecdotal.
Most of the time, in responsive mode we hide or display content.
For example: slideshow can be hidden in 480px less screens. for that we display a banner still banner with large text to explain the section / content.
So content can be changed with CSS. But the content does not change or added. Normally content is already loaded. But the showing will be changed with the responsiveness.
PS. your link does not work.
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.