Responsive div

Hi,

I am trying to make my siteorigin contents responsive like moesia since yesterday but no luck. Could you please help me to make my other divs responsive same like default service-area of Moesia Pro (including margin, padding and width).

Sections to make responsive:

  1. About Genxsolution
  2. Keep in touch
    etc

Site link: http://www.genxsolutions.co.uk/home/

My custom CSS:

.main-navigation{
margin-bottom: 4px;
}

.sticky-wrapper {
position: absolute;
width: 100%;
padding-top: 30px;

}
.sticky-wrapper, .top-bar {
background: transparent;
}
.is-sticky .top-bar {
background-color: #D3D3D3 !important;
}
.ah-widget-area .container .widget {
padding: 2px ;
font-size:100% !important;

}

.main-navigation ul ul a {
font-family: ‘Open Sans’, sans-serif;
text-transform: none;
color: #6cb9d2;

}
.main-navigation li {
text-transform: none;
}

div#panel-2040-0-0-0{
max-width: 74% !important;
}

#content {
min-height: calc(100vh - 131px);

}
.action-area .call-to-action{
color: #727272;
}

.social-area a:before{
color: #ffffff;
}
section.social-area ul li a:hover::before {
color: #ef766e;
}

.services-area{
padding: 0px !important;
padding-bottom: 40px !important;
}

div.service h4 > a:hover {
color: #ef766e;
}

#panel-2040-4-0-0{
padding: 0 !important; }

div#primary .widget-title {
color: #6cb9d2 !important;
}

body blockquote::before {
color: #ef766e;
}

.g-recaptcha {
transform:scale(1.65);

transform-origin:0 0;

}
#primary .widget-title {
font-size: 40px;
}

}
.site-footer {
color: white;
}

div#primary .widget-title::after {
border-color: #6cb9d2;
}
h1 {
color: #6cb9d2; !important;
line-height: 50px;
font-size: 40px;
}

h3 {
text-transform: none !important;
line-height: 50px;
}
h4 a:link,
h4 a:visited {
color: #6cb9d2;
}

h4 {
color: #6cb9d2 !important;
text-transform: none !important;
font-size: 20px !important;
}

.action-text {
text-transform: none !important;
}

.testimonial_slideri {

border:1px solid #C0C0C0 !important;

}

.panel-grid {
border: none;

}

div#panel-2040-5-0-0 {
padding: 7px;
}

h1 {
font-size: 40px;
margin-bottom: 20px;
}

body.page-template-page_front-page:not(.home) div#content {
margin-top: 115px;
}

div#panel-2911-0-0-0 {
max-width: 100% !important;
margin: 0;
padding-top: 1px !important;
padding: 0;
}

#panel-2911-2-0-0{
padding: 0 !important; }

.services-area a img:hover {
outline-color: black !important;
}

Any help would be appreciated. Thanks a lot.

Hello there,

I’m sorry to hear that you’ve run into issues. I’ll do whatever I can to resolve them. To make easier to assist you, let’s address them one by one.

> 1 About Genxsolution

Try adding the following CSS code:


body{
  word-break: break-all;
}

Let me know how it goes.

Regards,
Kharis

Hi Kharis

Thank you for reply. I added that code and that only shrink web fonts. Whats next.

Regards

Do you still see improper responsive layout on that section? If so, please take a screenshot of it, so I can be more exact. For the image, upload it to either Google Drive or Dropbox, and share its public link here.

Regards,
Kharis

Hi Kharis:

Here is the link to screen shot: https://drive.google.com/file/d/0Bx4UiWpQ8-boaWxlMm1TQjY2ajQ/view?usp=sharing

If i shrink the screen size or open it in low resolution screen, About Us area does’t go with services area. They are not aligned equally. When i open the site in mobile About Us area has more space on left,right than Services Area.

I hope you got my point.

Regards

Hello there,

Try this CSS code:


@media only screen and (max-width:600px) {
  
  div#panel-2040-0-0-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }  
  
}

Regards,
Kharis

Hi Kharis,

This worked for mobiles but not for big desktop screens. Could you please tell me how can i change block quote section. Im considering to use that for my About Us area. How can i bring my image on right side and text on left side.

Regards