I have figured out how to fix this, this can be marked as closed.

For any other users who have the same issue: I used @screensize for each mobile screen size and set the max-width and aligned to the center. Time-consuming, and perhaps not the best way, but as the initial fix I was given specified a max screen size in order to center the text it seemed like the only way!

Any thoughts on this? I need to launch this site ASAP and I’d like to get this fixed before I do. Thanks so much.

Thanks Mike. That’s definitely moving in the right direction. I want the thumbnails evenly spaced, but at present they’re aligned to the left of the page. Can you distribute them evenly in their container? Thank you!

Hi Jordan,

Nothing that I can see. Here are all my css customizations:

#top #header .av-main-nav > li > a .avia-menu-text, #top #header .av-main-nav > li > a .avia-menu-subtext {
text-transform: uppercase;
}
ul.sub-menu {
position: relative !important;
left: 20px !important;
opacity: 1 !important;
visibility: visible !important;
}
ul.sub-menu {
position: relative !important;
left: 0px !important;
opacity: 1 !important;
visibility: visible !important;
z-index: 10000;
box-shadow: none !important;
border-bottom: 1px solid #e1e1e1;
width: 100%;
}
.sub-menu li, .sub-menu li a{
float: none !important;
display: block !important;
}
.sub-menu a{
background: transparent !important;
border: 0 !important;
padding: 5px 8px !important;
}
.main_color .avia-icon-list .iconlist_icon {
background: #49662f;
}
h3.iconbox_content_title {
font-size: 20px !important;
align: center;
}
.iconbox .iconbox_content p:last-child {
color: #50341c !important;
}
.tnp-yellow-box .iconbox_content {
background: #cfa34f !important;
}
.tnp-yellow-box h3.iconbox_content_title {
color: #50341c !important;
font-size: 20px !important;
}
.tnp-orange-box .iconbox_content {
background: #c07b44 !important;
}
.tnp-orange-box h3.iconbox_content_title {
color: #50341c !important;
font-size: 20px !important;
}
.tnp-brown-box .iconbox_content {
background: #93653f !important;
color: #4f321b;
}
.tnp-brown-box h3.iconbox_content_title {
color: #50341c !important;
font-size: 20px !important;
}
.iconbox_content_container .post {
float: none;
}
.tnp-green-box .iconbox_content {
background: #a6b393 !important;
}
.tnp-green-box h3.iconbox_content_title {
color: #50341c !important;
font-size: 20px !important;
}
.avia-icon-list .iconlist_title {
color: #50341c !important;
}
.avia-icon-list .iconlist_icon {
height: 53px;
width: 53px;
line-height: 54px;
font-size: 20px;
border-radius: 500px;
}
media=”all”
.main_color a, .main_color .widget_first, .main_color strong, .main_color b, .main_color b a, .main_color strong a, .main_color #js_sort_items a:hover, .main_color #js_sort_items a.active_sort, .main_color .av-sort-by-term a.active_sort, .main_color .special_amp, .main_color .taglist a.activeFilter, .main_color #commentform .required, #top .main_color .av-no-color.av-icon-style-border a.av-icon-char {
font-weight: bold;
}
.post-meta-infos {
display: none;
}
.slide-meta {
display: none;
}
.iconbox_content_title {
font-weight: bold;
text-transform: uppercase;
font-size: 19px !important;
color: #50341c;
align: center;
}
#top h3 a {
font-weight: bold;
text-transform: uppercase;
}
#top .fullsize .template-blog .post .entry-content-wrapper {
margin-bottom: -28px;
}
.av-thin-font .av-special-heading-tag, .modern-quote .av-special-heading-tag {
color: #50341c;
}
body .av-special-heading .av-special-heading-tag {
padding: 2px 0 0 0;
}
li#menu-item-384 a {
color: green !important;
}
li#menu-item-5818 a {
color: #52772f !important;
}
.grid-entry-title {
align-content: center;
}
h3.grid-entry-title.entry-title {
text-align: center;
}
.news-time {
display: none;
}
.news-headline {
font-size: 12px;
text-transform: uppercase;
}
.main_color .heading-color, .main_color a.iconbox_icon:hover, .main_color h1, .main_color h2, .main_color h3, .main_color h4, .main_color h5, .main_color h6, .main_color .heading, .main_color .toggle_content strong, .main_color .toggle_content strong a, .main_color .tab_content strong, .main_color .tab_content strong a, .main_color .asc_count, .main_color .avia-testimonial-content strong, .main_color div .news-headline, #top .main_color .av-related-style-full .av-related-title, .main_color .av-default-style .av-countdown-cell-inner .av-countdown-time, .main_color .wp-playlist-item-meta.wp-playlist-item-title {
color: #50341c;
text-transform: uppercase;
}
.responsive.js_active #top .main_color .avia_combo_widget .top_tab .tab {
text-transform: uppercase;
}
h4.entry-title.summary {
font-style: italics !important;
font-size: 15px;
color: #49662f;
}
.recentcomments, .widget_recent_entries li {
font-size: 14px;
}
p.tribe-events-widget-link {
display: none;
}
#footer {
padding: 0 0 0 0;
}
ul, ol {
margin-bottom: 20px;
margin-left: 0px;
}
ul.sub-menu {
border-bottom: none;
}
.category-gear .av-share-box {
display: none!important;
}
.category-gear .av-comment-box {
display: none!important;
}
.main_color a, .main_color .widget_first, .main_color strong, .main_color b, .main_color b a, .main_color strong a, .main_color #js_sort_items a:hover, .main_color #js_sort_items a.active_sort, .main_color .av-sort-by-term a.active_sort, .main_color .special_amp, .main_color .taglist a.activeFilter, .main_color #commentform .required, #top .main_color .av-no-color.av-icon-style-border a.av-icon-char {
font-weight: bold;
}
.iconbox .iconbox_content a:hover {
color: #ffffff;
}
#top .tribe-events-list-event-title.entry-title, #top .tribe-events-list-event-title {
font-weight: bold !important;
font-size: 23px !important;
}
.avia-button {
border-bottom-width: 0px !important;
}
.avia-button.avia-size-medium {
padding: 5px 10px 6px 12px;
}
b.yks_mc_interest_group_text {
display: none;
}
.tribe-events-list-widget ol li {
margin-bottom: 25px;
}
@media only screen and (max-width: 1225px) and (min-width: 990px) {
.av-main-nav > li > a { padding: 0 12px; }
strong.logo { width: 20%; }
}
.widget_nav_menu ul:first-child > .current-menu-item > a, .widget_nav_menu ul:first-child > .current_page_item > a {
color: #4f321b;
}
body {
font-size: 14px;
}
.main_color .tnp-brown-box a {
color: #a6b393;
}
@media only screen and (max-width: 990px) {
h1.av-special-heading-tag {
font-size: 20px;
}}
.menu-item-top-level-7 a .avia-menu-text{
color: #52772f !important;
}
@media only screen and (min-width: 769px) {
.only_mobile { display: none !important; }}

#top h3 a {
font-size: large;
}

#top .grid-entry .inner-entry {
padding-right: 5px;
padding-bottom: 5px;
}

#top .grid-entry .inner-entry {
margin-right: 0px;
box-shadow: none;
}
h4 {
text-transform: inherit !important;
font-size: 20px !important;
line-height: .9em !important;
}
.content {
padding-top: 25px;
}
#tribe-bar-form {
padding-top: 30px;
padding-bottom: 20px;
}

.tribe-mini-calendar-event {
border-bottom: none;
}

.recentcomments, .widget_recent_entries li {
border-top: none;
}

#footer .widget {
margin: 30px 0 0px 0;
}

.widgettitle {
color: #4f321b !important;
}

.tribe-mini-calendar-event .list-info h2 {
color: #52772f !important;
}

#top .tribe-events-adv-list-widget span {
display: inline;
}

#tribe-events-header .tribe-events-sub-nav {
top: 0px !important;
}

.grid-image img {
padding: 15px;
border-radius: 20px;
}

.logo img {
padding-top: 5px;
padding-bottom: 8px;
}

#header_main {
border-bottom-width: 0px;
border-bottom-style: solid;
z-index: 1;

Hi Mike,

There is a manual image size setting in the portfolio element. See this screenshot below

As you can see, I’d like to see the portfolio render as square images, sized 180×180 pixels. However, when I select this setting, nothing changes on the front end of the site. Ideas?

• This reply was modified 7 years, 6 months ago by 1lizcollins.

Thanks Nikko, but I’ve already done that. It’s the gap between 1220px and 990 that seems to be a problem. How can I force more space between the menu items in that screen size range?

Thank you Mike!

That code has helped – the caption background now spans the full content width of the page, but I’m using a stretched layout I want the background to stretch all the way to the edge of the screen. How can that be achieved?

Thank you!

Thank you, this worked perfectly. Much appreciated. You can mark this as solved.

Thank you! It looks great. You can mark this as solved.

Thanks so much! Worked like a charm. You can mark this as solved :)

Thanks Victoria. This works on smaller screens (my laptop, tablet, iPhone). It still does not work on my desktop’s large screen – I still see that the header bar doesn’t extend the full width of the content area. Attaching a link to a screenshot in private content. Thanks.

Thanks for the response. Unfortunately, the code you provided has not fixed the issue. The mess you’re seeing with extra menu items is actually an issue I’ve had while importing info from another version of the site. I was hoping to get the header issue fixed before doing that import and before adding Ubermenu, but I couldn’t wait any longer. I’ve been waiting for a fix for three weeks, and I’m on a deadline for this website. So to be clear, the header issue is not related to Ubermenu. Nor is it related to any of my plugins, or to software versions, as I stated in my initial post. After adding your code the menu bar still only covers part of the header upon scrolling, but now it seems also to be displaced to the left. I’ve deactivated Ubermenu for the time being, in the hopes that it will simplify things. I’m adding site login info below in case it is helpful. I need a fix to this issue ASAP, as I’m in danger of missing a crucial deadline. Thanks in advance for your prompt response.

Any thoughts on this? I’d like to get this cleared up if possible!

Do you mean which browser do I use on my iPhone? I use Safari on my phone. When i view the mobile version using Safari on my desktop all looks correct…

Thanks! My panel didn’t show that an update was available, but when I manually checked I saw it. Updated, problem is gone. You can mark this as solved :)