Small CSS changes WordPress
- SOLVED
Hi,
I need some help with some minor css changes to this site http://lw-stagin.azurewebsites.net/
1)In the home page I need the connecting line to be behind the circles.
https://www.dropbox.com/s/kjwvd8lby4f5y58/Screenshot%202016-09-02%2023.11.09.png?dl=0
2)In the page "Como la uso" i need the circle with the star to be centered automatically (responsive) and to be in between the color transition.
https://www.dropbox.com/s/01etlxpgabuq3mt/Screenshot%202016-09-02%2023.12.05.png?dl=0
Here is how it should look like :
https://www.dropbox.com/s/9919i98uuil33f2/Screenshot-2016-09-02-23.15.12.jpg?dl=0
3) The mobile menu:
The mobile menu hamburger should be moved from where it is to the right corner.
https://www.dropbox.com/s/l1bnv1y8i98t8px/Screenshot-2016-09-02-23.17.32.jpg?dl=0
Answers (4)
Shoeb mirza answers:
2) For Second Issue, please add
.LW-star-icon i {left:45%;} If you want to centered the star for both the mobile and desktop
If only in mobile then
@media only screen (max-width:640px) {
.LW-star-icon i {left:45%;}
}
I'm checking your other questions..
Shoeb mirza comments:
1) Please change your border code to this
ctc-style.css
.LW-icon-conector {
border-bottom-color: rgba(71, 164, 198, 0.94)!important;
border-left-color: rgba(71, 164, 198, 0.94)!important;
border-right-color: rgba(71, 164, 198, 0.94)!important;
border-right-style: dashed!important;
border-right-width: 1px!important;
border-top-color: rgba(71, 164, 198, 0.94)!important;
box-sizing: border-box;
color: rgb(51, 51, 51)!important;
cursor: auto!important;
height: 80px!important;
left: 30px!important;
list-style-image: none!important;
list-style-position: outside!important;
list-style-type: none!important;
position: absolute!important;
top: 68px!important;
z-index: 1!important;
}
Shoeb mirza comments:
For third issue please use this code
3) @media only screen and (max-width:960px) {
.primary-menu.p-menu-stick {
position: absolute;
right: 0;
top: -61px;
}
}
dipka comments:
Hi,
I had something like that before. This is not a responsive solution as the star is not completely centered.
You need to use the margin: auto route.
https://www.dropbox.com/s/1d3mcp89f4aptz3/Screenshot%202016-09-02%2023.56.09.png?dl=0
Shoeb mirza comments:
hmm,
Please give a try to this code. It is working like a charm..
.fl-row.fl-row-full-width.fl-row-bg-color.fl-node-57c8604c56499 .fl-html {
display: flex;
justify-content: center;
align-items: center;
}
Shoeb mirza comments:
Another possible solution to what you wrote margin: 0 auto will be like this:
.fl-row.fl-row-full-width.fl-row-bg-color.fl-node-57c8604c56499 .fl-html {
width: 200px;
margin: 0 auto;
clear: both;
}
Shoeb mirza comments:
If your questions has been answered kindly vote according to the answers given by the developers based on time.
Thanks
Jayaram Y answers:
Just updating my code with all the answers. Please check my previous answers for the time i posted as i think you must award for the one who posted first.
1st one - Line aligned to the center of to list items.
.LW-icon-conector{
top:50%;
}
2nd one - star center aligned (responsive also)
.LW-star-icon i{
position: absolute;
left: 47%;
top: 40%;
}
3rd one - Menu for mobile screens move to top
@media screen and (min-width: 480px) {
.primary-menu.p-menu-stick{
position: absolute;
top: -60px;
right: 0;
}
}
Jayaram Y comments:
2nd one
.LW-star-icon i{
position: absolute;
left: 47%;
top: 40%;
}
It works responsive as well
Jayaram Y comments:
3rd one you need to change the menu container to top or use the below code only for mobiles via position.
@media screen and (min-width: 480px) {
.primary-menu.p-menu-stick{
position: absolute;
top: -60px;
right: 0;
}
}
IndiTheme - answers:
Hi Dipka,
Try to use this one,
1. For first question, to make line behind the circles.
Add this code in your css :
.LW-icon-list > .fa {
background: #f7f7f7;
}
2.Make the star to be centered automatically (responsive)
.fl-node-57c8604c56499 .fl-col-content.fl-node-content .fl-module:first-child .fa {
display:none!important
}
.fl-node-57c8604c56499 .fl-col-content.fl-node-content .fl-module:last-child .fl-html:before {
content: "\f006";
font-style: normal;
font-size: 50px;
background: #0092d3;
border: solid 1px #0092d3;
border-radius: 60px;
padding: 15px;
position: absolute;
z-index: 999;
right: 50%;
top: -10px;
font: normal normal normal 50px/1 FontAwesome;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: white;
transform: rotate(180deg);
margin-left: 0 auto;
width: 80px;
margin-right: -39px;
margin-top: 2px;
}
3.Mobile Menu
@media only screen and (max-width:992px) {
#wrapper .dd-options {
margin-bottom: 0!important;
}
#wrapper .dd-container .dd-selected {
position: absolute;
top: -62px;
right: 0;
text-align: right;
}
.container-menu {
padding-bottom:0!important;
}
}
IndiTheme - comments:
Here is the screenshot (mobile and desktop) with my code applied in your website.
1. Line behind circle & button menu
https://postimg.org/image/e9xh1csv1/1ad1a2aa/ (Opened dropdown menu)
https://postimg.org/image/t9v28wh8p/4ee7cd56/ (Closed dropdown menu)
2. Center stars
https://postimg.org/image/p0zx6rvh7/220c7309/ (Desktop)
https://postimg.org/image/usj3xg3ut/e1d456d8/ (mobile)
Please kindly to check the screenshots.
Best regards,
Inditheme
Arnav Joy answers:
Hi Deepika ,
I am unable to access your site and the screenshot , is there any firewall active ?
-Arnav