Centered Row In pages

centered Row in page

- 6 years, 9 months ago jlhardidge
  Participant
  I have tried everything. But the full width row / content that i have created in my boxed specular design layout is off set to the left and has a gap on the right. It isn’t centered to the screen, on desktop and in all responsive versions it isn’t centered. I have made all margins and borders 0px and tried vertical and horizontal alignment options in columns, but nothing has worked. I even put in custom css
  which just moved the content box of the theme centered with the content of the page (created in wpbakery) still offset and outside the borders of the content box in the theme. I have attached images.
  
  the Headings seem to be centered but the Rows themselves are not.
  
  I have also tried to create a new page and build the same content up again but had the same result. is it a css issue that can be fixed with custom css or is it deeper in the .php files?
  
  I have contacted WPbakery support and they replied “The issue is because the row output at your end is modified by the theme author which in-turn is causing the issue”
  
  please help
  
  This topic was modified 6 years, 9 months ago by jlhardidge.
  
  This topic was modified 6 years, 9 months ago by jlhardidge.
- 6 years, 9 months ago Mirela
  Participant
  
  Hello,
  
  Can you add some wp credentials in your profile data? So we can check this closely.
  Read this article for more information.
  
  Best regards!
- 6 years, 9 months ago jlhardidge
  Participant
  
  I have updated my profile with login details for my wp site. Thanks
- 6 years, 9 months ago Mirela
  Participant
  
  Hello,
  
  The boxes are created using a third party plugin, Hero boxes (screenshot). The css is from this plugin and not theme css. We did not test this plugin so i can not assure it’s full compatibility with it.
  I suggest you keep the custom css (displayed in your second screenshot) to fix the misalignment.
  
  *Please keep in mind that we do not offer support on third party plugins!
  
  Best regards!
- 6 years, 9 months ago jlhardidge
  Participant
  
  It isn’t just the Hero Boxes that have conflicting css that is causing the issue.
  
  It is happening with the service media icons and image media on the /literacy page as well, and that is after i deactivated all the third party plugins.
  
  And those are your own plugins for WPbakery. Its like something is forcing a margin/padding on the right side. or pushing all media items to the left. because standard in page headings are centered.
  
  Plus on top of that when i resize my browser, or in a smaller width responsive screen, the boxed layout content box is shrinking to the left and i have to refresh page to reset it. its happening on mobile devices too.
  
  See screen shots. and try it yourself. on /literacy.
  
  plus the search icon in the top menu has now disappeared.
  
  Ive tried re-installing the theme and it didn’t resolve..
  
  If you can’t resolve any issues I would like a full refund on this theme because i have already spent too much time stuffing around trying to make it work and I won’t be able to use the Specular theme at all if its this temperamental and buggy.
- 6 years, 9 months ago jlhardidge
  Participant
  
  I F@#n found the faulty code myself. Its on line 2115 in style.css
  
  its currently
  
  .vc_row .vc_row{
  margin-left: -15px !important;
  margin-right: -15px !important;
  }
  
  But when i changed it to
  
  .vc_row .vc_row{
  margin-left: auto !important;
  margin-right: auto !important;
  }
  
  or just removed to -15px in margin-left it resolved one issue with the content being off centred.
  
  However the problem still remains when i resize a window on desktop or use the Specular drop down menu all the content shifts to the left and a large margin is created on the right until i refresh the page.
- 6 years, 8 months ago jlhardidge
  Participant
  
  OK!!! so i couldn’t edit the style.css in the specular because it kept on bumping back to the unedited version. So i added the following code in the custom css in the Appearance customisation which did the trick.
  
  .section_clear{margin-left:auto; margin-right:auto;}
  
  .section-style{padding-top:70px; padding-bottom:70px;}
  
  .vc_row{
  
  margin-left:0px !important;
  
  margin-right:0px !important;
  
  float:none;
  
  width:100%;
  
  clear:both;
  
  }
  
  .vc_row .vc_row{
  
  margin-left:auto !important;
  
  margin-right:auto !important;
  
  }
  
  .wpb_row {
  
  padding-top: 0px !important;
  
  padding-bottom: 0px !important;
  
  padding-left: auto;
  
  padding-right: auto;
  
  }
  
  .wpb_row.section-style, .wpb_row.standard_section {
  
  margin-bottom: 0px;
  
  }
  
  I had to change the layout to fullwidth because there is still something faulty in the boxed code. but then i put my content in containers. it doesn’t quite have the desired effect with the window shadowing. But at least it doesn’t glitch out.
  
  if you have a fix for the boxed layout design. please let me know.
- 6 years, 8 months ago jlhardidge
  Participant
  
  So it had nothing to do with third party plugins. It was the Specular style.css code. You should look into that.
  
  Another question though!!
  
  Is there a way to customise the container width in using custom css or WPbakery? or do i have to ask WPbakery for that info, or create the code myself?
- 6 years, 8 months ago Mirela
  Participant
  
  Hello,
  
  You can change the container width for boxed layout (or fullwidth) in General Options > Layout > Boxed Container Width.
  
  Let us know.
  Best regards!