Align the icon and text to mobile version in elementor - css

I've designed a Light store website by using elementor. I need to arrange the features section in one line like Desktop view. on mobile view mobile view this is the default. I tried to do it by adjusting the margin it's not working properly.
How to do that?

Just click on column settings as marked in the screenshot. After that assign column width to 20 as shown in the screenshot2. You have to do this for all columns but before this set mobile view in Elementor.
screenshot
screenshot2

Related

Align 3 columns in mobile, wordpress and Elementor

I have 3 columns in one row in WP with Elementor. I need the last one align to right, when mobile layout is active.
I tried all settings for it, but blind path for me :).
Can you help me how please? Thank you
Pavel
you could try to duplicate the last column, then select the left column and hide it on mobile using the responsive options. You can find them in the advanced settings tab. On desktop and tablet, hide the duplicated column instead.

The logo disappear in mobile environment

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.

JavaFX 2 - Autoscroll to last item in exceeded toolbar

I am creating File Manager like Miller column app for windows in JavaFX for learning purpose.
Check the screenshot below:
As you can see, when toolbar exceeds, there comes a double arrow button for more items to select from popup.
I already did auto scroll for miller column, which works as expected.
scrollPane.hvalueProperty().bind(hBox.widthProperty());
I would like to auto scroll toolbar to last item and show double arrow on left side.
I am adding adding clickable buttons in toolbar for traversing like manual BreadCumBar.
Tried ControlsFX BreadCumBar, it doesn't even show arrows or popup when exceeds, Bug here : https://bitbucket.org/controlsfx/controlsfx/issues/810/no-double-arrow-popup-like-when.
If its not possible to do so with toolbar, I would like to know how to customize toolbar popup only via css. Or any other way that improve usability easiness.
Also I would love to know suggestions for whole app from expert designers.
Thanks.

How to create an overlay menu from a button in Bootstrap (mobile only)

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

INSTAPRESS WP PLUGIN - CSS Image Sizing on Mobile and Desktop alignment

I am having issues getting my Instagram images to display properly. I have tried all types of tricks and changes but cannot get it to look consistent on both desktop and mobile. It looks perfect when at full window size and across all browsers (except mobile), but when I change the size of the browser viewing window it gets all weird.
Here is my issue:
I need all the horizontal Instagram images to be responsive, meaning when I do change the size of the browser window they will adjust to the dimensions that are appropriate to view them properly. I want them to always stay in a row of 5 images across...
Here is a link to the work in progress:
http://www.jaygiroux.com/wordpress/
I have tried modifying the instapress.css to the best of my abilities but now I'm just stuck. I tried using percentages instead of pixels in some places but it's still not working...
What im reading online is that until version 3 nivo slider is not responsive, so you might want to update the library.
http://nivo.dev7studios.com/2012/05/30/the-nivo-slider-is-responsive/
Also i noticed that you're calling the tag twice (the first one is between the ie class compatibility code) so watch out for that too.

Resources