Ask your WordPress questions! Pay money and get answers fast! (more info)

Small CSS changes

  • 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)

2016-09-03

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

2016-09-03

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;
}
}

2016-09-03

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

2016-09-03

Arnav Joy answers:

Hi Deepika ,

I am unable to access your site and the screenshot , is there any firewall active ?

-Arnav