• Locked
1 reply [Last post]
Fri, 2016-01-08 12:59
gorkaroke
gorkaroke's picture
Offline
newbie
Barcelona
Last seen: 5 years 37 weeks ago
Barcelona
Timezone: GMT+1
Joined: 2016-01-08
Posts: 1
Points: 2

Hi everybody!

I have just started designing my first website and I am encountering a slight problem with the styling.

I have modified my CSS to place the social icons and the search box in the center of the page, but it only works in screens with my resolution. If I visit my page with a panoramic screen or a larger screen than the one I am using to design it, the items are not in the center.

Is there a way to block their position and for it to be the same on ALL devices?

This is my website: www.recetasparaprincipiantes.com (I am using Wordpress and the Customizr Pro Theme).

Thank you so much to whoever can give me a hand!

Top
Tags:
Fri, 2016-01-08 18:51
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 30 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Gawd! WP themes are crappily coded

Here are changes I made. Take care, as I did not thoroughly test. There may be unintended side effects.

Note, too, that some elements' rule sets appear in multiple style sheets; another example of shoddy coding.

.navbar .nav {
  margin: 1em auto;
  padding: 0;
  text-align: center;}
 
.navbar .nav {
  margin: 0 10px 0 0;}  /* Why the right margin?  
                           Seems unnecessary */
 
.navbar .nav > li {
  display: inline-block;}
 
form.bop-nav-search {
  min-width: 285px;}  /* better placed on the 
                         input element */
 
.screen-reader-text {
  display: inline-block;}  /* Never, ever hide
                              the label */

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
  • Locked