I'm building a new website with elementor but during the editing I have some problem with switching in the responsive mobile mode from desktop mode.
When I switch in mobile mode I try to change the font size but it doesn't work, particularly I can change the value of the font size but it doesn't change in the preview and in frontend at all.
Also if I switch in responsive mobile mode and I apply some changes, some of these changes pass also in the desktop mode.
Can someone help me please?
Perhaps the changes you're trying to make for the mobile styling are being overruled by CSS styles coming from somewhere else. Some places you could check are
look for inline CSS styles in the widget > content > text tab
widget > advanced > custom CSS
site settings ( click the hamburger icon at the top left of any elementor page)
If you still don't have any success, there's nothing to stop you from creating some custom CSS for the widget and using an #media() rule to target mobile devices.
Related
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 }}
I am new to this website so there might be similar question.
I have created the website with Joomla using Bootstrap.
http://theeruditepen.com/
I needed to update the website and after I updated, everytime the top logo (the top of the page and image (theEruditePen_Logo1.png) disappear in the mobile environment.
It used to show before, but some update change made the logo disappear and I do not find out how to fix it...I really want to show this logo even the mobile environment on top of menu.
I would really appreciate any tips and help.
Thank you
<img
src="/templates/theeruditepen/images/theEruditePen_Logo1.png"
class="visible-tablet visible-desktop img-responsive"
>
Remove visible-tablet visible-desktop class from the image tag.
The above classes will show the image only on tablets and desktops, and will hide it on mobile devices.
If u want to show the image on all devices, then remove the classes.
Or you can add .visible-phone to make it visible on phones
I run into a similar issue in the past.. the solution for me it was the following:
First I checked the type of module in which my element was placed (custom module, articles module, category module, etc).
After that, I checked the especific module option configuration (image attached as an example) and set the mobile option to on. enter image description here
Hope it helps.
I was told to create a separate mobile header for our website, which looks nothing like the desktop version. Therefore I decided to create a separate file for the HTML just for mobile. I don't need this to be responsive across different sizes as it will only be visible on xs devices. I am not using Bootstrap Navbar either so I just added my own hamburger menu button that will always be visible (on xs devices). Here's the header.
I want that when the user clicks the menu icon, a menu should overlay the current page. I found slide-in lateral menus that I didn't like because they pushed the page to the right. I want something to overlay but keep page below as is. The menu on the desktop site looks like this:
I'd like to keep the look pretty similar, very much like the Bootstrap styling for dropdowns.
What is the best way to go about doing this?
Here's a bootply: http://www.bootply.com/MWYq5hVtZ0
Just checked my site http://www.traumbad-muenchen.de in this tool http://quirktools.com/screenfly/ using the tablet setting Apple IPad 768x1024.
For this size the navigation menu seems to be too big, cause it is displayed in two lines. Thats why I would like to set the responsive breakpoint to 800px width so that instead of the navigation menu the navigation for mobile version is displayed (≡ menu symbol on the top, right corner).
What do I have to change in the responsive.css to get this done?
Thx for your tips.
BR
Heidi
There's nothing to change in responsive.css but instead you will be modifying the main style sheet # style.css
Simply replace all the instances of 719px to 800px
Now replace all the instances of 720px with 801px
You can copy paste the whole style sheet in a notepad ( or any similar tool ) and then start replacing just the 719px part and 720px and you should be good.
I have modified the twentytwelve theme for its responsiveness on a website. I like it, but my client would also like the OPTION on a mobile to view the website in full width.
Is that possible? Maybe with a plugin?
Maybe somehow I can put a link on the mobile website which removes the "viewport" meta tag so it'll be viewed in full screen?
To create a version of the website that is NOT responsive you can go into TwentyTwelve's style.css file and edit the media queries.
Scroll down to the media queries section and edit the "min-width" property, which is by default set to 600px.
Basically that query is saying that for every browser width larger than 600px, the full desktop version of the site will be shown.
If you change the min-width to be 1px, for example, the desktop version will always be shown.