pterpl

Forum Replies Created

Viewing 3 replies - 1 through 3 (of 3 total)
  • Forum: Developing with WordPress
    In reply to: Header is not mobile / tablet friendly
    Thread Starter pterpl

    (@pterpl)

    1 year, 11 months ago

    I figured my mistake! By setting the search bar to fill it works perfectly now. My final concern is how can you have the both the title and image on my header to appear on the PC version but only my image to appear on the header for mobile / tablet?

    Forum: Developing with WordPress
    In reply to: Header is not mobile / tablet friendly
    Thread Starter pterpl

    (@pterpl)

    1 year, 11 months ago

    Thanks for the insight! It WAS the search bar that was causing the problem. The over extensions has been fixed, however now that it is at a smaller width, it does not look as good on pc. It would be great if you could lend some CSS help. Would there be a way to keep the original width of the search bar that was shown in the previous image / code for pc and the newly changed search bar for mobile? Thank you for the help!

    Forum: Developing with WordPress
    In reply to: Header is not mobile / tablet friendly
    Thread Starter pterpl

    (@pterpl)

    1 year, 11 months ago

    Here is a screenshot of what it looks like on mobile. Here is the code I think? I am not familiar with the cs side of wordpress.

    <!-- wp:group {"style":{"spacing":{"padding":{"right":"20px","left":"20px","top":"7px","bottom":"7px"}}},"backgroundColor":"secondary","layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-secondary-background-color has-background" style="padding-top:7px;padding-right:20px;padding-bottom:7px;padding-left:20px"><!-- wp:group {"align":"wide","layout":{"type":"default"}} -->
    <div class="wp-block-group alignwide"><!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white","fontSize":"small"} -->
    <p class="has-text-align-center has-white-color has-text-color has-link-color has-small-font-size"></p>
    <!-- /wp:paragraph --></div>
    <!-- /wp:group --></div>
    <!-- /wp:group -->

    <!-- wp:group {"style":{"spacing":{"padding":{"top":"15px","right":"20px","bottom":"15px","left":"20px"}}},"backgroundColor":"white","layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-white-background-color has-background" style="padding-top:15px;padding-right:20px;padding-bottom:15px;padding-left:20px"><!-- wp:group {"align":"wide","layout":{"type":"flex","flexWrap":"nowrap"}} -->
    <div class="wp-block-group alignwide"><!-- wp:image {"id":307,"width":"225px","height":"auto","scale":"cover","sizeSlug":"full","linkDestination":"none","style":{"layout":{"selfStretch":"fit","flexSize":null}},"className":"is-style-default"} -->
    <figure class="wp-block-image size-full is-resized is-style-default"><img src="https://serverschoicestl.com/wp-content/uploads/2024/06/IMG_1891-edited.png" alt="" class="wp-image-307" style="object-fit:cover;width:225px;height:auto"/></figure>
    <!-- /wp:image -->

    <!-- wp:group {"align":"wide","layout":{"type":"default"}} -->
    <div class="wp-block-group alignwide"><!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"0px","padding":{"right":"0","left":"0"},"margin":{"top":"0","bottom":"0"}},"dimensions":{"minHeight":"0px"}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
    <div class="wp-block-group alignwide" style="min-height:0px;margin-top:0;margin-bottom:0;padding-right:0;padding-left:0"><!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap"}} -->
    <div class="wp-block-group"><!-- wp:site-title {"style":{"typography":{"lineHeight":"1","fontSize":"39px"},"spacing":{"margin":{"right":"0","left":"0","top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"},"padding":{"bottom":"0","top":"var:preset|spacing|20","right":"0","left":"0"}},"layout":{"selfStretch":"fit","flexSize":null}}} /--></div>
    <!-- /wp:group -->

    <!-- wp:search {"label":"Search","showLabel":false,"width":570,"widthUnit":"px","buttonText":"Search","buttonUseIcon":true,"borderColor":"black"} /-->

    <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|40"}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
    <div class="wp-block-group"><!-- wp:navigation {"ref":4,"layout":{"type":"flex","justifyContent":"left"},"style":{"typography":{"fontSize":"18px"},"spacing":{"blockGap":"var:preset|spacing|60"}}} /--></div>
    <!-- /wp:group -->

    <!-- wp:social-links {"iconColor":"base","iconColorValue":"#fffdfd","iconBackgroundColor":"body-text","iconBackgroundColorValue":"#646464","style":{"spacing":{"margin":{"top":"0","bottom":"0","left":"var:preset|spacing|80","right":"var:preset|spacing|80"},"blockGap":{"top":"var:preset|spacing|20","left":"var:preset|spacing|80"},"padding":{"top":"var:preset|spacing|40","bottom":"0","right":"var:preset|spacing|70","left":"var:preset|spacing|60"}}}} -->
    <ul class="wp-block-social-links has-icon-color has-icon-background-color" style="margin-top:0;margin-right:var(--wp--preset--spacing--80);margin-bottom:0;margin-left:var(--wp--preset--spacing--80);padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--70);padding-bottom:0;padding-left:var(--wp--preset--spacing--60)"><!-- wp:social-link {"url":"https://www.instagram.com/servers_choicestl/","service":"instagram"} /-->

    <!-- wp:social-link {"url":"https://www.tiktok.com/@servers.choice.st?lang=en","service":"tiktok"} /-->

    <!-- wp:social-link {"url":"https://x.com/ServerChoiceSTL","service":"x"} /--></ul>
    <!-- /wp:social-links --></div>
    <!-- /wp:group --></div>
    <!-- /wp:group --></div>
    <!-- /wp:group --></div>
    <!-- /wp:group -->
Viewing 3 replies - 1 through 3 (of 3 total)